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

问题描述

我对 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,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 应该重新渲染。我应该使用某种订阅模式吗？有什么提示吗？

非常感谢！

解决方法

不需要任何订阅模式，绝对不使用 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，并可以访问状态和修改器。

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

访问它来使用它 ,

您可以使用 localStorage。

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

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

data-sharing react-component react-hooks reactjs reactjs use-context