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

 //使用jsx必须引入React
 import React,{Component} from 'react';
 class Child extends Component{
   constructor(props){
     //初始化属于组件的属性
     super(props);

   }
   render(){
     console.log(this.props)
     //声明一个age，name属性，this.props中同名属性进行赋值
     let {age,name} = this.props;

   //this.props.children（三种数据格式）
     return(
       <div>
           child:{age}{name}
           {this.props.children}
       </div>
     )
   }
 }
 export default Child;

子组件Child.js

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

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

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