react基础---组建数据交互pros

原创于 2019-06-21 11:52:57 发布 · 265 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

88 篇文章

订阅专栏

博客重点提及了this.pros.属性，虽未展开详细内容，但表明该属性是核心关注点，在信息技术领域可能与前端开发等相关编程概念有关。

重点在this.pros.属性

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="dist/browser.min.js"></script>
    <script src="dist/jquery.js"></script>
    <script src="dist/react.js"></script>
    <script src="dist/react-dom.js"></script>
  </head>
  <body>
    
    <div id="root">
    </div>

    <script type="text/babel">

      /*
        组件：
          组件中只能存在一个根容器
          组件与组件之间可以互相嵌套
          组件本身可以具有业务逻辑
      */

      var Nav = React.createClass({
        render:function(){
          return(
            <div>
              <ul>
                {
                  this.props.navData.map(function(item,index){
                    return(
                      <li key={index}><a href="#">{ item }</a></li>
                    )
                  })
                }
              </ul>
            </div>
          )
        }
      })

      var Root = React.createClass({
        render:function(){
          var nav1 = ["百度","谷歌"]
          var nav2 = ["新闻","地图"]
          return(
            <div>
              <Nav navData={nav1}/>
              <Nav navData={nav2}/>
            </div>
          )
        }
      })

      ReactDOM.render(<Root />,document.getElementById("root"))


    </script>

  </body>
</html>

在这里插入图片描述