react 父组件与子组件通信

本文主要是介绍react 父组件与子组件通信，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1.父（UserListContainer）到子(UserList)

class UserList extends React.Component{render(){return(<div><ul>{this.props.users.map(function(user){return(<li key={user.id}>{user.name}    </li>)})}</ul></div>);}
}

class UserListContainer extends React.Component{constructor(props){super(props);this.state={users:[]}}componentDidMount(){fetch('url').then(response=>{response.json().then(data=>{this.setState({users:data})})}    );}render({return(<UserList users="{this.state.users}">);});
}

通过给子组件的属性赋值，将参数传给子组件的props。

2.子组件传给父组件

原理：父组件定义一个方法并绑定this作用域，将方法传给子组件。子组件在调用方法，在方法中将数据以参数的形式传给父组件。

class UserListContainer extends React.Component{constructor(props){super(props);this.state={users:[]}this.handleAddUser = this.handleAddUser.bind(this);}//新增用户handleAddUser(user){fetch("url",{method:'pose',body:JSON.stringify({User:user})}).then(response=>{response.json().then(function(newUser){this.setState((preState)=>({users: preState.users.concat([newUser])}))})})}componentDidMount(){fetch('url').then(response=>{response.json().then(data=>{this.setState({users:data})})}    );}render({return(<UserList addUser="{this.handleAddUser}" users="{this.state.users}">);});
}

class UserList extends React.Component{constructor(props){super(props);this.add= this.add.bind(this);}add(){this.props.onAddUser(name); }render(){return(<div><div><ul>{this.props.users.map(function(user){return(<li key={user.id}>{user.name}    </li>)})}</ul><div><div Onclick="this.add">add</div></div>);}
}

这篇关于react 父组件与子组件通信的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---