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

Question

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

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

Answer 1

对此没有直接的解决方案，但您确实有几个选择：

选项1

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

例如：

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

这可能是您最好的选择，并且从事物的声音来看，找到一种方法来重构您的应用程序以使该选项变得更加可行可能会很好。 通常有一种方法可以更改您的应用程序结构以使其更好地工作。

如果你真的希望兄弟姐妹之间有更直接的沟通渠道，你可以给 Comp1 一个 Comp2 的ref ，但我不鼓励这样做。

选项 2

另一种选择是使用contexts 。 这使任何人都可以与使用相同上下文的任何人进行交流。 此功能有很多功能。 有些人使用上下文和reducer建立了一个类似 Redux 的系统，让应用程序的任何部分（或他们放置上下文提供程序的更大组件）与任何其他部分进行通信。 有关使用上下文管理应用程序 state 的更多信息，请参阅本文。

import React from 'react';

let context = React.createContext()

const Comp1 = () => {
  let ctx = React.useContext(context) || {};
  return <p>{ctx.data || 'Default Value'}</p>
}

const Comp2 = () => {
  let ctx = React.useContext(context);
  return <button onClick={e => ctx.setData(Math.random())}>Change Value</button>
}

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

选项 3

为了完整起见，第三种选择是使用 Redux 之类的东西来帮助共享 state。 如果您已经在使用 Redux，或者如果您真的想要/需要它并了解您要进入的内容，请仅使用此选项。 Redux 并不是每个项目都适用，不是每个人都需要。

边注

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

Answer 2

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

以下是您的应用程序的上下文（在这一点上它比它的价值更麻烦）： https://codesandbox.io/s/objective-hellman-sdm55?file=/src/App.js

Answer 3

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

伪代码：

<Parent>
    const [value, setValue] = useState();
    <Comp1 onClick={setvalue} />
    <Comp2 value={value} />
</Parent>

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

Answer 4

您可以研究 state 和道具。 参考文献： https://flaviocopes.com/react-state-vs-props