浅析React children-前端进阶之旅

# 一、子组件

我们有一个组件 <Grid /> 包含了几个组件 <Row /> 。你可能会这么使用它

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

@前端进阶之旅: 代码已经复制到剪贴板

这三个 Row 组件都成为了 Grid 的 props.children 。使用一个表达式容器，父组件就能够渲染它们的子组件

class Grid extends React.Component {
  render() {
    return <div>{this.props.children}</div>
  }
}

@前端进阶之旅: 代码已经复制到剪贴板

父组件也能够决定不渲染任何的子组件或者在渲染之前对它们进行操作。例如，这个 <Fullstop /> 组件就没有渲染它的子组件

class Fullstop extends React.Component {
  render() {
    return <h1>Hello world!</h1>
  }
}

@前端进阶之旅: 代码已经复制到剪贴板

React中的Children不一定是组件，它们可以使任何东西。例如，我们能够将上面的文字作为children传递我们的 <Grid /> 组件

<Grid>Hello world!</Grid>

@前端进阶之旅: 代码已经复制到剪贴板