React学习笔记②

import React,{Component} from 'react';import Child from './Child.js'

class App extends Component{
  constructor(){
    //初始化属于组件的属性
    super();
    this.state = {
      age:12,
      name:'234'
    }
  }
  render(){
    //结构赋值
    let {age,name} = this.state;
    return(
     <div>
       {/* 组件的使用必须大写 */}
       <Child age={age} name={name}>
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
        </ul>
       </Child>
     </div>
    )
  }
}
export default App;

父组件App.js

age={age} name={name}传递给Child.js

 1 //使用jsx必须引入React
 2 import React,{Component} from 'react';
 3 class Child extends Component{
 4   constructor(props){
 5     //初始化属于组件的属性
 6     super(props);
 7     
 8   }
 9   render(){
10     console.log(this.props)
11     //声明一个age，name属性，this.props中同名属性进行赋值
12     let {age,name} = this.props;
13 
14 
15   //this.props.children（三种数据格式）
16     return(
17       <div>
18           child:{age}{name}
19           {this.props.children}
20       </div>
21     )
22   }
23 }
24 export default Child;

子组件Child.js

let {age,name} = this.props;接收App.js传递的数据

this.props.children；接收App.js传递的DOM

以上是父组件向子组件传递数据

来源：https://www.cnblogs.com/zhangxiaoqiong/p/10728914.html