react js中不相关的组件之间如何共享数据？

Posted 2023-04-14

【中文标题】react js中不相关的组件之间如何共享数据？

【英文标题】：How can i share data between non-related components in react js?

【发布时间】：2021-06-24 02:42:03

【问题描述】：

我对 reactjs 很陌生，我正在努力解决以下问题： 我有一个包含 AudioPlayer 的 Header 组件（在我的 App.js 文件中）。此 AudioPlayer 需要使用 src 的当前值（歌曲的路径，存储在本地）和标题进行更新。现在，想想这样的事情：

App.js

function App()
    <Header/>
    <Page1/>
    <Page2/>
    <Page3/>
    ...
    <SomePage/>
    ...
    <Footer/>

Header.js

import HeaderLogic from './HeaderLogic'

funtion Header()

    const property1, property2, ..., path, title = HeaderLogic()
    //In HeaderLogic I want to get path and title, set in SomePageLogic.js
    ...
    return <>
        <AudioPlayer
            src=path
            title=title
        />
        ...
    </>

SomePage.js

import SomePageLogic from './SomePageLogic'
import songPath from './somePath/songPath'

function SomePage()
    const title = 'songTitle'
    const property1, property2, ..., propertyN = SomePageLogic(songPath, title)
    //In SomePageLogic (or maybe here) I want to set path and title of the song,
    //in order to be used from the HeaderLogic component

    return <>
        ...
    </> 

我不确定 useContext 在这种情况下是否可以正常工作，因为我想在不相关的组件之间共享数据......当然，当检测到歌曲已设置时，Header 应该重新呈现。我应该使用某种订阅模式吗？ 有什么提示吗？

非常感谢！

【问题讨论】：

这能回答你的问题吗？ Sharing data between React components

【参考方案1】：

不需要任何订阅模式，也绝对不使用 localStorage - 上下文完全用于您的用例：在不相关的组件之间共享状态。

例如，我想在标题和下面某处的 Page1 之间共享选定的菜单，您将使用 createContext() 创建一个上下文，导出它的提供程序，包装子项，然后在所有组件之间共享该状态你设置为孩子。示例：

const defaultSelectedMenu = 'a';
export const MenuContext = createContext( selectedMenu: defaultSelectedMenu );
export const MenuProvider = ( children ) => 
  const [selectedMenu, setSelectedMenu] = useState(defaultSelectedMenu);
  return (<MenuContext.Provider value=selectedMenu, setSelectedMenu>
      children</MenuContext.Provider>)

然后在你的 app.js 中：

...
<MenuProvider>
  <Header />
  <Page1 />
</MenuProvider>
<Page2 />
...

现在，您的 Header 和 Page1 组件可以通过 useContext(MenuContext) 访问 MenuContext 并可以访问状态和 mutator。

这只是一个简单的示例，但相同的逻辑适用于您想要共享的任何逻辑、繁重的计算、API 调用等等。您在<Provider> 中定义实现，然后通过useContext 访问它来使用实现

【讨论】：

感谢您的回答！我快到了，但仍然缺少一些东西：当 Page1 为上下文提供值时，Header 无法接收它们，因为它们仍然不可用（Header 组件在 Page1 之前呈现）。在您看来，我该如何管理这种行为？

【参考方案2】：

您可以使用localStorage。

基本上，它会将您想要的值存储在浏览器中。因此，您可以从应用程序中的任何位置访问它。

【参考方案3】：

您可以使用 Redux 来存储您的状态。基本上 React Redux 是一种商店，您可以在其中存储您的状态，并且每当它更新时，它都会直接呈现 html。您可以通过在钩子中使用 useSelector 在任何地方访问商店状态，只要它被其他组件更改，它就会获得更新的值