將數據傳遞給相同的組件之一

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