react children

children

react 中，属性名是一一对应的，除了children。

对于一个组件来说，其this.props.children拿到的是什么呢？？？举个🌰

<Grid>
  <Row />
  <Row />
  <Row />
</Grid>

// 在Grip中，拿到的children就是三个Row

注意：任何东西，都可以作为children， 举例：

<Grid>
  Here is a row:
  <Row />
  Here is another row:
  <Row />

  {() => <h1>Hello World!</h1>}

</Grid> // 字符串 和<Row>， 甚至最后一个箭头函数 都是Grid的children

我的使用举例：

// 场景是，每个页面都有一个title，这个title都有一样的样式，但是里面文字不一样，或者有些多个button 等待，因此，我写了一个Title的组件，这个组件我用css文件，设置了样式。这样实现了，我在一个地方设置样式，这样传入不同文字显示就行了。
// 不需要每一个页面里都写样式了。

// Title组件
export default class Title extends React.Component {
    render() {
        return (
            <div className='title'>
                {this.props.children}
            </div>
        )
    }
}

// 页面中的使用：

        render() {return (
            <div className='my_indicator_container'>
                <Title>
                    我的指标
                    <Button type="primary" onClick={this.handleClick} style={{ float: 'right' }}>指标登记</Button>
                </Title>
            </div>
        )
    }

// 第二个页面：

return (

　　<div className='adhocContainer'>

　　　　<Title>

　　　　　　Ad-hoc

　　　　　　<Popover content={content} placement='right' trigger='hover' style={{ marginLeft: 16 }}>

　　　　　　　　<Icon name='problem-circle-o' style={{ fontSize: '18px' }} />

　　　　　　</Popover>

　　　　</Title>

　　</div>

)

 

// 是不是很方便啊，开心脸~

我的使用很方便，react提供了很多操纵children的方法：

循环：React.Children.map 以及 React.Children.forEach 

计数： React.Children.count 栗子：

  render() {
    return <p>React.Children.count(this.props.children)</p>
  }

转换为数组（如果你需要排序）： React.Children.toArray

class Sort extends React.Component {
  render() {
    const children = React.Children.toArray(this.props.children)
    // Sort and render the children
    return <p>{children.sort().join(' ')}</p>
  }
}

 

参考文章： https://segmentfault.com/a/1190000011527160