react父子组件通信

在 React 中，父组件向子组件传递数据可以通过 props 属性来实现。子组件可以通过 this.props 访问到传递过来的数据。

例如，我们有一个父组件和一个子组件：

// 父组件
class ParentComponent extends React.Component {
  state = {
    message: 'Hello, World!'
  }

  render() {
    return (
      <div>
        <ChildComponent message={this.state.message} />
      </div>
    )
  }
}

// 子组件
class ChildComponent extends React.Component {
  render() {
    return (
      <div>
        <h1>{this.props.message}</h1>
      </div>
    )
  }
}

在父组件中，我们将 message 作为 props 传递给子组件。在子组件中，我们可以通过 this.props.message 访问到传递过来的数据。

如果要实现子组件向父组件传递数据，可以在父组件中定义一个回调函数，将这个函数作为 props 传递给子组件。子组件在需要向父组件传递数据时，调用这个回调函数，并将数据作为参数传递给它。

例如，我们有一个父组件和一个子组件：

// 父组件
class ParentComponent extends React.Component {
  state = {
    message: ''
  }

  handleMessage = (message) => {
    this.setState({ message })
  }

  render() {
    return (
      <div>
        <ChildComponent onMessage={this.handleMessage} />
        <p>{this.state.message}</p>
      </div>
    )
  }
}

// 子组件
class ChildComponent extends React.Component {
  handleClick = () => {
    this.props.onMessage('Hello, World!')
  }

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Click me!</button>
      </div>
    )
  }
}

在父组件中，我们定义了一个叫做 handleMessage 的回调函数，并将它作为 props 传递给子组件。在子组件中，我们定义了一个 handleClick 函数，当按钮被点击时调用这个函数，并将数据 'Hello, World!' 作为参数传递给父组件的回调函数。

这样，子组件就可以向父组件传递数据了。