this.props.XXX与this.props.children区别小结

项目中遇到,瞬间懵逼,这不是我认识的this.props用法啊!一问才知道,原来还有这种操作,特此留存,以备后查!

props常规用法

propsreact框架组件化一个重要组成,this.props对象的属性与其组件的属性是一一对应的。举例如下:

//组件Component:
<Component name="hahahaha",age="23",sex="famale" />
//Component内部:
class Component extends React.Component{
  render(){
    return (
      <div>{this.props.name}</div>
    )
  }  
}

export default Component;

//输出hahahaha

this.props.children用法

this.props.children表示组件的所有子节点。

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      var NotesList = React.createClass({
        render: function() {
          return (
            <ol>
              {
                React.Children.map(this.props.children, function (child) {
                  return <li>{child}</li>;
                })
              }
            </ol>
          );
        }
      });
      ReactDOM.render(
        <NotesList>
          <span>hello</span>
          <span>world</span>
        </NotesList>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

//输出:
       hello
       world

这里需要注意的是,只有当子节点多余1个时,this.props.children 才是一个数组,否则是不能用 map 方法的, 会报错。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 现在最热门的前端框架,毫无疑问是 React 。上周,基于 React 的 React Native 发布,结果一...
    sakura_L阅读 440评论 0 0
  • 本笔记基于React官方文档,当前React版本号为15.4.0。 1. 安装 1.1 尝试 开始之前可以先去co...
    Awey阅读 7,796评论 14 128
  • 自己最近的项目是基于react的,于是读了一遍react的文档,做了一些记录(除了REFERENCE部分还没开始读...
    潘逸飞阅读 3,472评论 1 10
  • 作为年轻的一代——90后开发者,或许你是刚刚培训出来的程序员;或许你是拥有三年工作经验 Github 项目 Sta...
    GSNICE阅读 817评论 0 2
  • 没有年轮的樹 : 每一个另起一行 __ 微型散文诗 作者: 何 强 " 发现你不曾有过,也将不会为你所...
    天邊的凝紅阅读 239评论 0 1