在运行时在 React 组件之间发送数据

Question

我正在开发我的第一个 React 应用程序，目前面临的问题是在运行时必须在多个组件之间交换数据。我已经找到了各种方法来解决这个问题，但是对于我应该遵循哪一种以及哪一种最有意义感到完全困惑。

需求1：从父组件向子组件发送数据（运行时）

数据应该从父组件发送到子组件。例如，这可能是输入字段的内容。我目前为此使用参考 API。在父组件中，我创建了对子组件的引用，并使用回调 (onChange) 调用子组件的函数（带参数）。

const map = useRef();

[...]

<Map ref={map} />

[...]

<input type="text" placeholder="Enter location" onChange={enterLocation} />

[...]

function enterLocation(event) {
    map.current.locationSearch(location); // Function of the child component
}

要求 2：将数据从子组件发送到另一个子组件（运行时）

数据将在两个子组件之间发送。我找到了各种方法：Redux、Context API 以及 Reference API。我的想法是首先将数据发送到父组件，然后通过引用将其发送到另一个子组件。然而，这对我来说似乎是不必要的复杂。

Answer 1

通常最简单的解决方案是最好的。

对于第一个示例，您可以将数据从父组件发送到子组件作为道具：

function Parent() {
   const data = 'some_string';

  return <div>
       <Child title={data} />
       <div>Other component</div>
    </div>
}

function Child(props) {
   return <span>{props.title}</span>
}

对于第二个需求，你可以使用 state，如果两个孩子使用某个 state，你可以在 parent 中提升这个 state：

function Parent() {
  const [state, setState] = useState('');

  return <>
    <Input value={state} setValue={setState} />
    <Length str={state} />
  </>
}

function Input(props) {
  return <input value={props.value} onChange={(e) => props.setValue(e.target.value)} />;
}

function Length(props) {
  return <div>You insert string with length: {props.str.length}</div>
}