React：如何在独立组件之间传递数据

Question

我知道如何将数据从一个组件传递到另一个组件，但我想做的是拥有两个独立的组件，其中一个组件将数据传递给另一个组件。

例如，<Component 1>将数据传递到<Component 2>. 我不想将数据传递到 的<Component 2>代码内部<Component 1>。我想知道是否可以传递数据以及如何从<Component 1>到<Component 2>。因为，我想要一个独立的组件来执行自己的任务，并在这些任务结束时将数据传递给不包含在她自己的代码中的其他组件。

这是我想做的一个例子：

class Test extends Component{
   constructor(){
       super()
   }

   render(){
      return(
         <div>
              <h1>Test</h1>
              <Component 1 />
              <Component 2 />
         </div>
      )
   }
}

那么，React.js中有没有什么办法可以在独立组件之间传递数据呢？

Answer 1

const { useState, createContext, useContext } = React;
const Context = React.createContext();

const MyComponent = () => {
  const { name, updateName } = useContext(Context);
  return (<span onClick={() => updateName('Jane')}>{name}</span>);
};

const App = () => {
  const [name, updateName] = useState('John');
  return (
    <Context.Provider value={{ name, updateName }}>
      <MyComponent />
      <br/>
      <MyComponent />
    </Context.Provider>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.1/umd/react-dom.production.min.js"></script>
<div id="root" />

练习该片段...单击 John 将名称更新为 Jane