react组件通信

1.父子组件之间通信

父组件通过props将数据传输给子组件，子组件可以通过props传递回调函数来向父子间传递数据。

class UserList extends React.Component{
    constuctor(props){
        super(props);
        this.state = {
            newUser: ''
        };
        this.handleChange = this.handleChange.bind(this);
        this.handleClick = this.handleClick.bind(this);
    }
    handleChange(e){
        this.setState({
            newUser : e.target.value
        })
    }
    handleClick(){
        //一般要判断传出去的值是否合法，这里是例子，所以省略
        this.props.onAddUser(this.state.newUser);
    }
    render(){
        return (
            <div>
                <ul className="user-list">
                    {this.props.users.map(function(user){
                        return (
                            <li key={user.id}>
                                <span>{user.name}</span>
                            </li>
                        );
                    })}
                </ul>
                <input onChange={this.handleChange} value={this.state.newUser}></input>
                <button onClick={this.handleClick}>新增一个用户</button>
            </div>
        )
    }
}
class UserListContainer extends React.Component{
    constuctor(props){
        super(props);
        this.state = {
            users: []
        };
        this.handleAddUser = this.handleAddUser.bind(this)
    }
    handleAddUser(user){
        //新增用户
    }
    render(){
        return (
            <UserList users={this.state.users} onAddUser={this.handleAddUser}></UserList>
        )
    }
    componentDidMount(){
        var _this = this
        //请求后端获取数据setState
        _this.setState({users: response.data})
    }
}

 

2.兄弟组件之间通信

需要进行状态提升，提升至父组件，通过父组件回调函数进行数据交互。

3.当组件层级很深的时候，可以使用context

//需要声明context的属性类型信息
UserListContainer.childContextTypes = {
   onAddUser : PropTypes.func  
}
//onAddUser是一个方法，可以包含在一个context对象上