React之父组件向子组件传值

class Parent extends React.Component{

constructor(){

super();

this.state={co:"red"}

}

render(){

return(

<Child color={this.state.co}></Child>

)

}

}

class Child extends React.Component{

constructor(props){

super(props);

}

render(){

return(

<div style={{color:this.props.color}}>我是子组件，想要变红色</div>

)

}

}

ReactDOM.render(

<Parent />,

document.getElementById('box')

);

  state状态只能内部更改，而props可以接取外部数据，因此在子组件内用状态定义传出值，在父组件用this.props.color接收值

  结果如下图：