zoukankan      html  css  js  c++  java
  • ReactNative--children

    this.props.children
    children是一个例外,不是跟组件的属性对应的
    表示组件的所有子节点

    HTML5中有一种标签:列表 <ul> <ol> <li>

    定义一个列表组件,列表项中显式的内容,以及列表项的数量都由外部决定

        var ListComponent = React.createClass({
          render: function () {
            return (
              <ul>
                {
                  /*
                      列表项内容及数量不确定,需要在创建模板时才能确定
                      利用this.props.children从父组件获取需要展示的列表项内容
    
                      获取列表项内容后,需要遍历children,逐项进行设置
                      使用React.Children.map方法
                      返回值: 数组对象。这里数组中的元素是<li>
                  */
                  React.Children.map(this.props.children, function(child){
                    return <li>{child}</li>
                  })
                }
              </ul>
            )
          }
        });
    
        ReactDOM.render(
          (
            <ListComponent>
              <h1>lanou</h1>
              <a href = "https://www.baidu.com">https://www.baidu.com</a>
            </ListComponent>
          ),
          document.getElementById("container")
        );
  • 相关阅读:
    GDUFE ACM-1050
    hdu-2020
    hdu-2055
    hdu-2734
    GDUFE ACM-1145
    GDUFE ACM-1127
    GDUFE ACM-1126
    GDUFE ACM-1125
    GDUFE ACM-1124
    GDUFE ACM-1123
  • 原文地址:https://www.cnblogs.com/chebaodaren/p/6430164.html
Copyright © 2011-2022 走看看