时间戳

首页 > 解决方案 > 将数据传递给相同的组件之一

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

问题描述

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

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

标签： javascriptreactjs

解决方案

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

选项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 的系统，让应用程序的任何部分（或他们放置上下文提供者的更大组件）与任何其他部分进行通信。有关使用上下文管理应用程序状态的更多信息，请参阅本文。

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 之类的东西来帮助共享状态。仅当您已经在使用 Redux，或者您确实想要/需要它并了解您要进入的内容时才使用此选项。Redux 并不适用于每个项目，每个人都不需要它。

边注

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

推荐阅读