React中嵌套组件与被嵌套组件的通信过程(2)

class TabItem extends Component { static propTypes = { name: PropTypes.string, activeName: PropTypes.string, onClick: PropTypes.func, children: PropTypes.node } handleClick = () => { this.props.onClick(this.props.name) } render() { return ( <li onClick={this.handleClick} className={this.props.activeName === this.props.name ? 'active' : 'noActive'}> <span className='switchBtn'>{this.props.name}</span> <div className={this.props.active ? 'show' : 'hide'}> {this.props.children} </div> </li> ) } } class Tab extends Component { static propTypes = { children: PropTypes.node, onClickItem: PropTypes.func, activeName: PropTypes.string } render() { return ( <ul> { React.Children.map(this.props.children,(child)=>{ if (child.type === TabItem) { return React.cloneElement(child, { // 把父组件的props.name赋值给每个子组件（父组件传值给子组件） activeName: this.props.activeName, // 父组件的方法挂载到props.onClick上，以便子组件内部通过props调用 onClick: this.props.onClickItem }) } else { return child } }) } </ul> ) } } export default class Area extends Component { state = { activeName: '' } handleClick = (name) => { this.setState({ activeName: name }) } render() { return ( <Tab activeName={this.state.activeName} onClick={this.handleClick} > <TabItem name={'武汉'} > 武汉的美食，这里有一大堆jsx代码 </TabItem> <TabItem name={'上海'} > 武汉的美食，这里有一大堆jsx代码 </TabItem> <TabItem name={'北京'} > 武汉的美食，这里有一大堆jsx代码 </TabItem> </Tab> ) } }

通过这种方式，我们发现在使用Tab和TabItem时会变得非常简单。

那么接下来让我们介绍一下解决嵌套组件通信这个问题的关键：React.Children.map和React.cloneElement。
React.Children

React.Children是专门用来处理this.props.children这个东西的工具。

通常props.children可以是任何变量类型：数组、对象、文本或者其他的一些类型，但是我们这里使用

React.Children.map(this.props.children,(child)=>{ // *** })

无论this.props.children的类型是什么都不会报错。

这里只是用了React.children的map函数，实际上它还有foreach，count以及only的玩法。

foreach就不解释了，很容易理解是干嘛的。
count就是得到被嵌套组件的数量。
only就是返回被嵌套的组件，并且只能有一个被嵌套的组件，否则会抛异常。

React.cloneElement

先看下面这段代码

const child= <Child value={1} /> const newChild=React.cloneElement(child,{ name:'额外的props' },'123')

newChild的值为：

<Child value={1} > 123 </Child>

可以很明显看到，React.cloneElement的就相当克隆一个组件，然后可以传给它额外的props和children。

总结

对于简单的嵌套组件用最开始的方法其实已经够了。

但是对于复杂的嵌套组件为了更好更方便的使用，往往需要与被嵌套的组件进行通信。

而我们可以使用React.Children和React.cloneElement来解决这个问题。

您可能感兴趣的文章: