关于react父子组件之间的传值问题解析

父组件传递给子组件：
核心思路就是将父组件中的state传递给子组件

父组件代码：
class Father extends React.Component {
 constructor(props){
 super(props);
 // 父组件的state
 this.state = {
 menu:[]
 }
 }
 componentDidMount() {
 // 这里可以发ajax请求 去后端请求数据 通过setState将值保存到自己的state中
 // 假定data为后端请求回来的数据
 var data = [];
 this.setState({
 menu: data
 })
 }
 render() {
 return (
 {this.state.menu.map(function (data) {
 return <Children data={data} key={data.key}/>
 })}
 )
 }
}
export default Father;
子组件代码：
class Children extends React.Component {
 render(){
 // 这里的data就是父组件传递过来的值
 var data = this.props.data;
 return(
 <Col md={ 3 }>
 <FormGroup className="p-b">
 <label className="input">
 // 这里就可以通过将data中的值渲染到子组件中
 <input id={data.key} type="text" value={data.value}/>
 <em className="fa fa-check"></em>{data.value}
 </label>
 </FormGroup>
 </Col>
 )
 }
}