React.js 小书 Lesson22 - props.children 和容器类组件

番茄西红柿发布于2019-08-21 17:34 / 1670人阅读

摘要：由于会把插入表达式里面数组中的一个个罗列下来显示。这样通过这个布局组件，就可以在各个地方高度复用我们的布局。嵌套的结构在组件内部都可以通过获取到，这种组件编写方式在编写容器类型的组件当中非常有用。下一节中我们将介绍小书和属性。

React.js 小书 Lesson22 - props.children 和容器类组件

本文作者：胡子大哈
本文原文：http://huziketang.com/books/react/lesson22

转载请注明出处，保留原文链接以及作者信息

在线阅读：http://huziketang.com/books/react

有一类组件，充当了容器的作用，它定义了一种外层结构形式，然后你可以往里面塞任意的内容。这种结构在实际当中非常常见，例如这种带卡片组件：

组件本身是一个不带任何内容的方形的容器，我可以在用这个组件的时候给它传入任意内容：

基于我们目前的知识储备，可以迅速写出这样的代码：

class Card extends Component {
  render () {
    return (
      
        
          {this.props.content}
        
      
    )
  }
}

ReactDOM.render(
  
      React.js 小书
       开源、免费、专业、简单
      订阅：

} />, document.getElementById("root") )

我们通过给 Card 组件传入一个 content 属性，这个属性可以传入任意的 JSX 结构。然后在 Card 内部会通过 {this.props.content} 把内容渲染到页面上。

这样明显太丑了，如果 Card 除了 content 以外还能传入其他属性的话，那么这些 JSX 和其他属性就会混在一起。很不好维护，如果能像下面的代码那样使用 Card 那想必也是极好的：

ReactDOM.render(
  
    React.js 小书
    开源、免费、专业、简单
    订阅：
  ,
  document.getElementById("root")
)

如果组件标签也能像普通的 HTML 标签那样编写内嵌的结构，那么就方便很多了。实际上，React.js 默认就支持这种写法，所有嵌套在组件中的 JSX 结构都可以在组件内部通过 props.children 获取到：

class Card extends Component {
  render () {
    return (
      
        
          {this.props.children}
        
      
    )
  }
}

把 props.children 打印出来，你可以看到它其实是个数组：

React.js 就是把我们嵌套的 JSX 元素一个个都放到数组当中，然后通过 props.children 传给了 Card。

由于 JSX 会把插入表达式里面数组中的 JSX 一个个罗列下来显示。所以其实就相当于在 Card 中嵌套了什么 JSX 结构，都会显示在 Card 的类名为 card-content 的 div 元素当中。

这种嵌套的内容成为了 props.children 数组的机制使得我们编写组件变得非常的灵活，我们甚至可以在组件内部把数组中的 JSX 元素安置在不同的地方：

class Layout extends Component {
  render () {
    return (
      
        
          {this.props.children[0]}
        
        
          {this.props.children[1]}
        
      
    )
  }
}

这是一个两列布局组件，嵌套的 JSX 的第一个结构会成为侧边栏，第二个结构会成为内容栏，其余的结构都会被忽略。这样通过这个布局组件，就可以在各个地方高度复用我们的布局。

总结

使用自定义组件的时候，可以在其中嵌套 JSX 结构。嵌套的结构在组件内部都可以通过 props.children 获取到，这种组件编写方式在编写容器类型的组件当中非常有用。而在实际的 React.js 项目当中，我们几乎每天都需要用这种方式来编写组件。

下一节中我们将介绍《React.js 小书 Lesson23 - dangerouslySetHTML 和 style 属性》。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89681.html

写一本关于 React.js 的小书

摘要：因为工作中一直在使用，也一直以来想总结一下自己关于的一些知识经验。于是把一些想法慢慢整理书写下来，做成一本开源免费专业简单的入门级别的小书，提供给社区。本书的后续可能会做成视频版本，敬请期待。本作品采用署名禁止演绎国际许可协议进行许可 React.js 小书本文作者：胡子大哈本文原文：React.js 小书转载请注明出处，保留原文链接以及作者信息在线阅读：http://huzi...

Scorpion 2019-08-21 11:39 评论0 收藏0
React.js 小书 Lesson21 - ref 和 React.js 中的 DOM 操作

摘要：多余的操作其实是代码里面的噪音，不利于我们理解和维护。下一节中我们将介绍小书和容器类组件。 React.js 小书 Lesson21 - ref 和 React.js 中的 DOM 操作本文作者：胡子大哈本文原文：http://huziketang.com/books/react/lesson21 转载请注明出处，保留原文链接以及作者信息在线阅读：http://huziketan...

Gemini 2019-08-21 17:34 评论0 收藏0
React.js 小书 Lesson18 - 挂载阶段的组件生命周期（一）

摘要：我们把将组件渲染，并且构造元素然后塞入页面的过程称为组件的挂载这个定义请好好记住。挂载的时候，会在组件的之前调用，在元素塞入页面以后调用。下一节中我们将介绍小书挂载阶段的组件生命周期二。 React.js 小书 Lesson18 - 挂载阶段的组件生命周期（一）本文作者：胡子大哈本文原文：http://huziketang.com/books/react/lesson18 转载请注...

pf_miles 2019-08-21 17:34 评论0 收藏0
React.js 小书 Lesson13 - 渲染列表数据

摘要：一般来说，的值可以直接后台数据返回的，因为后台的都是唯一的。下一节中我们将介绍小书实战分析评论功能一。 React.js 小书 Lesson13 - 渲染列表数据本文作者：胡子大哈本文原文：http://huziketang.com/books/react/lesson13 转载请注明出处，保留原文链接以及作者信息在线阅读：http://huziketang.com/books/...

Alan 2019-08-21 17:33 评论0 收藏0
React.js 小书 Lesson7 - 组件的 render 方法

摘要：一个组件类必须要实现一个方法，这个方法必须要返回一个元素。你也可以把它改成，它就会显示小书。注意，直接使用在的元素上添加类名如这种方式是不合法的。现在页面上是显示小书。下一节中我们将介绍小书组件的组合嵌套和组件树。 React.js 小书 Lesson7 - 组件的 render 方法本文作者：胡子大哈本文原文：http://huziketang.com/books/react/l...

Near_Li 2019-08-21 17:33 评论0 收藏0