react 子组件怎么向父组件传值

发布网友发布时间：2022-05-07 18:32

共2个回答

懂视网时间：2022-05-14 22:15

这篇文章主要介绍了关于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>
 )
 }
}

热心网友时间：2022-05-14 19:23

这个是相当容易的，在使用 React 开发的过程中经常会使用到，主要是利用 props 来进行交流。例子如下：
// 父组件
var MyContainer = React.createClass({
getInitialState: function () {
return {
checked: true
};
},
render: function() {
return (
<ToggleButton text="Toggle me" checked={this.state.checked} />
);
}
});

// 子组件
var ToggleButton = React.createClass({
render: function () {
// 从【父组件】获取的值
var checked = this.props.checked,
text = this.props.text;

return (
<label>{text}: <input type="checkbox" checked={checked} /></label>
);
}
});