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.jsreact
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.jsthis
let {age,name} = this.props;接收App.js传递的数据
this.props.children;接收App.js传递的DOM
以上是父组件向子组件传递数据spa