React - 函数作为子组件

函数作为子组件也是React的一种设计模式，和高级组件一样，仅仅是一种设计模式。

这种模式如何工作的了？

举个栗子

这是三个按钮，我可以选择其中的一个，然后下方可以显示你的颜色。

这个如何用函数作为子组件解决了？

const options = [{ name: 'Red', val: 'red' },{ name: 'Orange', val: 'orange' },{ name: 'Blue', val: 'blue' }
];
class Selector extends React.Component {//按钮组件constructor (props) {super(props);this.state = {val: 'red',}}handle = (data) => {this.setState({val: data.val,})}render () {return (<div className = 'wrap'><ul>{ this.props.options.map( data => (<li key = { data.val }className = { `item ${ this.state.val == data.val ? 'selected' : '' }` }onClick = { () => this.handle(data) }  >{ data.name }</li>))}</ul>{ /* 这是关键 ，下面的代码调用子组件（函数），渲染出那一种颜色 */ }{ this.state.val && this.props.children(this.state.val)}</div>);}
}
class App extends React.Component {constructor (props) {super(props);}render () {return (<Selector options = { options } //子组件 （为一个函数)，接受一个参数，然后渲染出来>{ color => (<div style = {{width: "50px",height: "50px",background: color,} }/>  )}</Selector>)}
}
ReactDOM.render(<App />,document.getElementById("root")
)

 .wrap {width:200px;border:1px solid #eee;
}
ul {list-style: none;padding:0px;
}
.item {text-align:center;color:white;background:gray;cursor:pointer;}
.selected {color: black;background: white;
}

它仅仅是一个设计模式，是否选择使用，完全在于你。

React - 函数作为子组件相关推荐

react基础之--子组件向父组件传值
在父组件中定义一个函数,该函数用于处理传递过来得值(比如用于修改父组件中state得数据) 在子组件调用部分通过属性绑定得形式绑定该函数(在子组件中就可以通过this.props.属性名就可以拿到该函 ...
React开发（186）:react 父调用子组件的方法
<BaseTableSearchsearchParams={baseSearchParams}onSearch={this.handleSearch}onRef={(node) => (t ...
react如何在父组件中调用子组件事件
父组件是如何使用子组件的事件的,下边数值累加的例子类组件将子组件的this传到父组件,给父组件添加一个属性,值为this,之后就可以通过父组件的属性调用子组件的事件了 import React,{ ...
React 函数组件导出自定义方法的办法说明
在进行React开发时,函数组件是比较方便的,由于函数组件没有this指针,因此如果想在父组件里调用函数型子组件的方法,就需要用到React.useImperativeHandle 这个帮助函数. 办 ...
子组件获取父组件的值，将这个值作为状态值保存
这是之前的一个想法,但是后来又思考了,如果我的子组件在很多地方都要调用,为什么不把获取数据的函数放在子组件里面,父组件有需要就直接调用子组件的方式就可以.转换一个思路.同时发现一个神奇的事情目前没有 ...
vue父组件与子组件之间传值
1.父组件像子组件传值:v-bind进行绑定:(自定义属性) 父组件其中counts是自定义属性,它的值是传给子组件的子组件子组件通过props属性,counts是父组件传过来的值 2.子组件向 ...
vue 子组件调用($emit)父组件方法后父组件方法如何回调子组件方法
子级组件中的实现组件名称:EditTable.vue export default{ name:'ET', ....... methods:{ ShowMore(step){ ...
vue3.0 父组件调用子组件方法及获取子组件的值
vue3.0 父组件调用子组件方法及获取子组件的值通过对比2.0的获取及调用方式这里我们也可以借鉴2.0中的this.$refs去获取3.0和2.0的refs获取的方式有点大同小异,但是思路还是一样 ...
vue子组件和父组件之间传值方法
父组件向子组件传值(prop-主要用于传递数据) 父组件向子组件传值分为两步: 1.父组件动态绑定一个需要传递的值 2.子组件在props属性中获取到父组件中传递的值,并使用例子父组件: 在父组件 ...
React父组件调用子组件的方法【class组件和函数组件】
在react组件之间的通信是通过props属性来完成的,比如父组件需要将数据传递给子组件,那么组件在渲染子组件的时候,直接将数据作为子组件的属性传参: <Child onChildEvent={ ...

React - 函数作为子组件

React - 函数作为子组件相关推荐

最新文章

热门文章