React 组件嵌套

2019-06-09 14:56:31 阅读：164 来源： 互联网

标签：return App Welcome React 嵌套 names props 组件

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>05_components_composing</title>
</head>
<body>
<div>
  <h2>Welcome A!</h2>
  <h2>Welcome B!</h2>
  <h2>Welcome C!</h2>
</div>
<hr>

<div id="example"></div>

<script src="../js/react.js"></script>
<script src="../js/react-dom.js"></script>
<script src="../js/babel.min.js"></script>

<script type="text/babel">
  /*
   1. 拆分组件: 拆分界面, 抽取组件
     * 单个标题组件: Welcome
     * 应用组件: App
   2. 分析确定传递数据和数据类型
     * Welcome: props.name  string
     * App: props.names    array
   */
  // 定义组件 App
  class App extends React.Component {
    render(){
      // 获取传递进来的数据
      let {names} = this.props;
      return (
          <div>
            {
              names.map((item, index) => {
                return <Welcome key={index} name={item}/>
              })
            }
          </div>
      )
    }
  }
  // 定义Welcome组件
  function Welcome(props) {
    console.log(this);// undefined
    return <h2>Welcome {props.name}</h2>
  }
  
  let names = ['kobe', 'wade', 'anverson', 'duncan'];
  
  // 渲染组件
  ReactDOM.render(<App names={names}/>, document.getElementById('example'));
</script>
</body>
</html>

这里有两个组件

App组件又使用到了Welcome组件.

标签：return,App,Welcome,React,嵌套,names,props,组件
来源： https://blog.csdn.net/huangning1995/article/details/91352573

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

React 组件嵌套