react怎么实现父子组件传值

在 React 中，父组件可以通过 props 将数据传递给子组件。子组件可以通过 this.props 访问到父组件传递过来的数据。如果需要在子组件中修改这些数据，可以通过回调函数的方式将修改后的数据传递给父组件，从而实现父子组件之间的双向数据绑定。

例如，父组件传递数据给子组件的代码如下：

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: 'Hello, world!'
    };
  }

  render() {
    return (
      <ChildComponent data={this.state.data} />
    );
  }
}

class ChildComponent extends React.Component {
  render() {
    return (
      <div>{this.props.data}</div>
    );
  }
}

如果需要在子组件中修改父组件传递过来的数据，可以通过回调函数的方式实现。例如：

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: 'Hello, world!'
    };
    this.handleDataChange = this.handleDataChange.bind(this);
  }

  handleDataChange(newData) {
    this.setState({
      data: newData
    });
  }

  render() {
    return (
      <ChildComponent data={this.state.data} onDataChange={this.handleDataChange} />
    );
  }
}

class ChildComponent extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    this.props.onDataChange(e.target.value);
  }

  render() {
    return (
      <div>
        <input type="text" value={this.props.data} onChange={this.handleChange} />
      </div>
    );
  }
}

在上面的代码中，父组件通过传递一个名为 onDataChange 的回调函数给子组件，子组件在数据发生变化时调用该回调函数，将修改后的数据传递给父组件。