Javascript 将数据传递给相同的组件之一

我是新来的。我只想将数据从Comp2传递给它的同级Comp1。我知道使用父组件传递道具，但在这种情况下，我必须重写Comp1以从其父组件获取状态，这将影响所有Comp1。我怎样才能让只选择的Comp1接收数据而不打扰其他人？

没有一个简单的解决方案，但您有两个选择：

选择1

最直接的方法如您所述——让Comp2使用事件侦听器将数据向上传递给其父级，然后让父级将数据向下传递给Comp1。这可以是传递给Comp1的可选道具，因此您的外部Comp1不接收该道具并不重要

例如：

<Comp1 />
<div>
    <Comp1 />
    <Comp2 />
</div>

这可能是你最好的选择，而且听上去，找到一种方法来重构你的应用程序，使这个选择变得更加可行，这可能是一件好事。通常有一种方法可以改变你的应用程序结构，使其更好地工作

如果你真的希望兄弟姐妹之间有一条更直接的交流线路，你可以给Comp1一个Comp2，但我不鼓励这样做

选择2

另一个选择是使用。这使任何人都有能力与使用相同上下文的任何人进行通信。这个功能有很大的威力。有些人使用上下文建立了一个类似Redux的系统，并允许应用程序的任何部分或他们放置上下文提供者的更大组件与任何其他部分进行通信。有关使用上下文管理应用程序状态的更多信息，请参阅

import React from 'react';

const Comp1 = ({data='Default Value'}) => (
  <p>{data}</p>
)

const Comp2 = ({onData}) => (
  <button onClick={e => onData(Math.random())}>Change Value</button>
)


export default function App() {
  let [data, setData] = React.useState(null);
  return (
    <div>
      <Comp1/>
      <div>
        <Comp1 data={data}/>
        <Comp2 onData={setData}/>
      </div>
    </div>
  );
}

选择3

为了完整性，第三种选择是使用Redux之类的工具来帮助共享状态。仅当您已经在使用Redux，或者如果您真的想要/需要它并且了解您正在进入的领域时，才使用此选项。Redux并不适用于每个项目，每个人都不需要它

旁注

---

我知道你说你是新来的。为简洁起见，对于其他谷歌用户，我在示例中使用了很多函数，如React.useState、React.useContext等。这些函数需要一点时间才能理解，我不希望您学习如何使用它们来解决您的问题。事实上，如果你是新手，我强烈建议你使用你已经学会的类语法来选择选项1。当你进行更多的练习并开始感觉到第一个选项的局限性时，你就可以开始尝试其他的方法了。

对此没有一个简单的解决方案，但你有两个选择：

选择1

最直接的方法如您所述——让Comp2使用事件侦听器将数据向上传递给其父级，然后让父级将数据向下传递给Comp1。这可以是传递给Comp1的可选道具，因此您的外部Comp1不接收该道具并不重要

例如：

<Comp1 />
<div>
    <Comp1 />
    <Comp2 />
</div>

这可能是你最好的选择，而且听上去，找到一种方法来重构你的应用程序，使这个选择变得更加可行，这可能是一件好事。通常有一种方法可以改变你的应用程序结构，使其更好地工作

如果你真的希望兄弟姐妹之间有一条更直接的交流线路，你可以给Comp1一个Comp2，但我不鼓励这样做

选择2

另一个选择是使用。这使任何人都有能力与使用相同上下文的任何人进行通信。这个功能有很大的威力。有些人使用上下文建立了一个类似Redux的系统，并允许应用程序的任何部分或他们放置上下文提供者的更大组件与任何其他部分进行通信。有关使用上下文管理应用程序状态的更多信息，请参阅

import React from 'react';

const Comp1 = ({data='Default Value'}) => (
  <p>{data}</p>
)

const Comp2 = ({onData}) => (
  <button onClick={e => onData(Math.random())}>Change Value</button>
)


export default function App() {
  let [data, setData] = React.useState(null);
  return (
    <div>
      <Comp1/>
      <div>
        <Comp1 data={data}/>
        <Comp2 onData={setData}/>
      </div>
    </div>
  );
}

选择3

为了完整性，第三种选择是使用Redux之类的工具来帮助共享状态。仅当您已经在使用Redux，或者如果您真的想要/需要它并且了解您正在进入的领域时，才使用此选项。Redux并不适用于每个项目，每个人都不需要它

旁注

---

我知道你说你是新来的。为简洁起见，对于其他谷歌用户，我在示例中使用了很多函数，如React.useState、React.useContext等。这些函数需要一点时间才能理解，我不希望您学习如何使用它们来解决您的问题。事实上，如果你是新手，我强烈建议你使用你已经学会的类语法来选择选项1。当你进行更多的练习并开始感觉到第一种选择的局限性时，你就可以开始尝试其他的事情了。

你可以研究状态和道具。

---

参考资料：

你可以研究状态和道具。

---

参考资料：

在react中，数据总是从上到下移动，因此，如果不经过更高的结构，就没有真正的方法将信息传递给同级。您可以使用上下文，但同样，它的提供程序必须围绕两个同级组件，这意味着它必须 将在父组件应用程序中实现。它还用于在深度嵌套的同级组件之间传递数据，以避免将道具传递到多个深度级别。在您的情况下，道具只需传递一级深度，最好只将状态存储在父componentApp中

以下是您的应用程序的上下文情况—此时它的麻烦比它的价值还多：

---

在react中，数据总是从上到下移动，因此不经过更高的结构就没有真正的方法将信息传递给兄弟姐妹。您可以使用上下文，但同样，它的提供程序必须围绕两个兄弟组件，这意味着它必须在父组件应用程序中实现。它还用于在深度嵌套的同级组件之间传递数据，以避免将道具传递到多个深度级别。在您的情况下，道具只需传递一级深度，最好只将状态存储在父componentApp中

以下是您的应用程序的上下文情况—此时它的麻烦比它的价值还多：

---

对于这个用例，我建议在父组件中使用useState钩子，并将值和函数传递给特定的子组件

伪代码：

---

在我看来，对于您的用例，Redux和上下文API有点过头了。

对于这个用例，我建议在父组件中使用useState钩子，并将值和函数传递给特定的子组件

伪代码：

---

在我看来，对于您的用例来说，Redux和上下文API有点过头了。

您使用的是函数还是类components@PavlosKaralis嗨，帕夫洛斯，我用的是类，你用的是函数类还是类components@PavlosKaralis嗨，帕夫洛斯，我正在上课