我们可以创建ParentComponent并使用handleInputChange方法来更新ParentComponent的状态。导入ChildComponent并将两个道具从父组件传递给子组件，即handleInputChange函数和count。

import React, { Component } from 'react';
import ChildComponent from './ChildComponent';

class ParentComponent extends Component {
  constructor(props) {
    super(props);
    this.handleInputChange = this.handleInputChange.bind(this);
    this.state = {
      count: '',
    };
  }

  handleInputChange(e) {
    const { value, name } = e.target;
    this.setState({ [name]: value });
  }

  render() {
    const { count } = this.state;
    return (
      <ChildComponent count={count} handleInputChange={this.handleInputChange} />
    );
  }
}

现在我们创建了ChildComponent文件，并将其保存为ChildComponent.jsx。这个组件是无状态的，因为子组件没有状态。我们使用prop-types库进行道具类型检查。

import React from 'react';
import { func, number } from 'prop-types';

const ChildComponent = ({ handleInputChange, count }) => (
  <input onChange={handleInputChange} value={count} name="count" />
);

ChildComponent.propTypes = {
  count: number,
  handleInputChange: func.isRequired,
};

ChildComponent.defaultProps = {
  count: 0,
};

export default ChildComponent;

如果同样的场景不是到处都有，你可以使用React的上下文，特别是如果你不想引入状态管理库所引入的所有开销。另外，它更容易学习。但是要小心;你可能会过度使用它并开始编写糟糕的代码。基本上，你定义了一个Container组件(它将保存并为你保存这段状态)，使得所有的组件都对从它的子组件(不一定是直接的子组件)写入/读取这段数据感兴趣。

背景信息-反应

你也可以使用一个普通的React来代替。

<Component5 onSomethingHappenedIn5={this.props.doSomethingAbout5} />

将doSomethingAbout5传递给组件1:

<Component1>
    <Component2 onSomethingHappenedIn5={somethingAbout5 => this.setState({somethingAbout5})}/>
    <Component5 propThatDependsOn5={this.state.somethingAbout5}/>
<Component1/>

如果这是一个常见问题，那么您应该开始考虑将应用程序的整个状态转移到其他地方。你有几个选择，最常见的是:

回来的 通量

基本上，不是在组件中管理应用程序状态，而是在发生更新状态的情况时发送命令。组件也从这个容器中提取状态，因此所有数据都是集中的。这并不意味着您不能再使用局部状态，但这是一个更高级的主题。

似乎我们只能将数据从父组件传递给子组件，因为React促进单向数据流，但为了让父组件在“子组件”中发生某些事情时更新自己，我们通常使用所谓的“回调函数”。

我们将父类中定义的函数作为“props”传递给子类 从子进程调用该函数，在父进程中触发它 组件。

class Parent extends React.Component {
  handler = (Value_Passed_From_SubChild) => {
    console.log("Parent got triggered when a grandchild button was clicked");
    console.log("Parent->Child->SubChild");
    console.log(Value_Passed_From_SubChild);
  }
  render() {
    return <Child handler = {this.handler} />
  }
}

class Child extends React.Component {
  render() {
    return <SubChild handler = {this.props.handler}/ >
  }
}

class SubChild extends React.Component {
  constructor(props){
   super(props);
   this.state = {
      somethingImp : [1,2,3,4]
   }
  }
  render() {
     return <button onClick = {this.props.handler(this.state.somethingImp)}>Clickme<button/>
  }
}
React.render(<Parent />,document.getElementById('app'));

 HTML
 ----
 <div id="app"></div>

在这个例子中，我们可以通过将函数传递给它的直接子函数来实现数据从子→子→父的传递。

在React中，数据不能从子节点传递到父节点。数据必须从父节点传递给子节点。在这种情况下，您可以使用内置的Context API或第三方状态管理解决方案，如Redux、Mobx或Apollo GraphQL。然而，如果你的应用程序结构太小，你可以将数据存储在你的父元素中，然后通过prop drilling将其发送给你的子元素。但如果你的项目比较大，就会很混乱。

父组件

 function Parent() {
        const [value, setValue] = React.useState("");

        function handleChange(newValue) {
          setValue(newValue);
        }

        // We pass a callback to Child
        return <Child value={value} onChange={handleChange} />;
    }

子组件

    function Child(props) {
         function handleChange(event) {
             // Here, we invoke the callback with the new value
             props.onChange(event.target.value);
         }
  
         return <input value={props.value} onChange={handleChange} />
    }

下面是获得两种绑定数据方式的简短代码片段。

计数器显示来自父进程的值，并从子进程更新

class Parent extends React.Component { constructor(props) { super(props) this.handler = this.handler.bind(this) this.state = { count: 0 } } handler() { this.setState({ count: this.state.count + 1 }) } render() { return <Child handler={this.handler} count={this.state.count} /> } } class Child extends React.Component { render() { return <button onClick={this.props.handler}>Count {this.props.count}</button> } } ReactDOM.render(<Parent />, document.getElementById("root")); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div>