组件通信

父子组件的通信通过 props

// UserList.jsx
class UserList extends Component {
  render() {
    return (
      <div>
        <ul className="user-list">
          {this.props.users.map(user => (
            <li key={user.id}>
              <span>{user.name}</span>
            </li>
          ))}
        </ul>
      </div>
    )
  }
}

// UserListContainer.jsx
import UserList from './UserList'

class UserListContainer extends Component {
  constructor(props) {
    super(props)
    this.state = {
      users: []
    }
  }
  render() {
    return (
      {/* 通过props传递users */}
      <UserList users={this.state.users} />
    )
  }
  componentDidMount() {
    fetch('/path/api').then(res => {
      res.json().then(data => {
        this.setState({
          users: data
        })
      })
    })
  }
}

子向父组件通信

父组件可以通过子组件的 props 传递给子组件一个回调函数，子组件在需要改变父组件数据时，调用该回调即可。下面为 UserList 增加一个添加新用户功能：

class UserList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      newUser: '',
    };
  }
  handleChange = e => {
    this.setState({
      newUser: e.target.value,
    });
  };
  handleClick = () => {
    if (this.state.newUser && this.state.newUser.length > 0) {
      this.props.onAddUser(this.state.newUser);
    }
  };
  render() {
    return (
      <div>
        <ul className="user-list">
          {this.props.users.map(user => (
            <li key={user.id}>
              <span>{user.name}</span>
            </li>
          ))}
        </ul>
        <input onChange={this.handleChange} value={this.state.newUser} />
        <button onClick={this.handleClick}>add uesr</button>
      </div>
    );
  }
}

兄弟组件通信

兄弟组件不能直接相互传送数据，需要通过状态提升的方式实现兄弟组件的通信：即把组件之间需要共享的 state 保存到距离它们最近的共同父组件内，任意一个兄弟组件都可以通过父组件传递的回调修改共享状态。