react children

最新推荐文章于 2025-09-04 18:55:33 发布

转载最新推荐文章于 2025-09-04 18:55:33 发布 · 109 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yadiblogs/p/10110726.html

文章标签：

#javascript #ViewUI

本文深入探讨了React中children属性的使用方式，包括其在组件中的作用、如何处理多个children及利用React.Children提供的方法进行遍历、计数和转换数组等操作。通过具体示例，展示了如何将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 (

　　　　<Title>

　　　　　　Ad-hoc

　　　　　　</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

转载于:https://www.cnblogs.com/yadiblogs/p/10110726.html