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

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

要求1：将数据从父组件发送到子组件（运行时）

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

const map=useRef（）；
[...]
[...]
[...]
函数位置（事件）{
map.current.locationSearch（location）；//子组件的函数
}

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

---

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

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

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

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

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

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

函数父函数（）{
常量数据='some_string'；
返回
其他成分
}
功能儿童（道具）{
返回{props.title}
}

对于第二个要求，您可以使用状态，如果两个子项使用某个状态，您可以在父项中设置此状态：

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>
}

函数父函数（）{
常量[状态，设置状态]=使用状态（“”）；
返回
}
功能输入（道具）{
返回props.setValue（e.target.value）}/>；
}
功能长度（道具）{
返回插入字符串的长度：{props.str.length}
}

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

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

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

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

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

函数父函数（）{
常量数据='some_string'；
返回
其他成分
}
功能儿童（道具）{
返回{props.title}
}

对于第二个要求，您可以使用状态，如果两个子项使用某个状态，您可以在父项中设置此状态：

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>
}

函数父函数（）{
常量[状态，设置状态]=使用状态（“”）；
返回
}
功能输入（道具）{
返回props.setValue（e.target.value）}/>；
}
功能长度（道具）{
返回插入字符串的长度：{props.str.length}
}

谢谢！道具不是在应用程序开始时传递给组件吗？但是，我希望在运行时（例如，输入后）将数据发送给子级。在渲染组件期间，不仅在应用程序开始时，组件渲染中，还会将道具传递给组件。如果道具或状态已更改，请在浏览器中尝试我的第二个示例，谢谢！道具不是在应用程序开始时传递给组件吗？但是，我希望在运行时（例如，输入后）将数据发送给子级。在渲染期间，道具将传递给组件，组件渲染不仅在应用程序开始时，而且如果道具或状态发生更改，请在浏览器中尝试我的第二个示例或类似示例，这应该涵盖您的用例-无需参考。当然有多种方法可以做到这一点，但这是没有Redux或ContextApi的最简单的解决方案。它将状态保留在父对象中，而子对象只是渲染对象。如果这就是你要找的，我会在代码中添加一个答案和一些细节。当然有多种方法可以做到这一点，但这是没有Redux或ContextApi的最简单的解决方案。它将状态保留在父对象中，而子对象只是渲染对象。如果这是您正在寻找的，我将在代码中添加一个带有一些细节的答案。