时间戳

首页 > 解决方案 > 如何与组件共享变量

reactjs - 如何与组件共享变量

问题描述

主应用程序如下所示：

import Cookies from 'js-cookie';
function App() {
let cookie = Cookies.get('mycookie');
return (
    <>
        <Router>
            <div>
                {<Switch>
                    <Route path="/comp1">
                        <Comp1 />
                    </Route>
                    <Route path="/comp2">
                        <Comp2 />
                    </Route>
                </Switch>
            </div>
        </Router>
    </div>
);
}

如您所见，在主应用程序中，我正在读取 cookie。现在，所有组件都需要访问 cookie。如何使组件从主应用程序读取 cookie？当然，我可以使用“Cookies.get”来读取 cookie。但由于我在 App.js 中做的不仅仅是读取 cookie，我更愿意在 App.js 中执行一次操作，然后与组件共享所有这些。

标签： reactjs

解决方案

您可以作为道具传递给需要它的孩子/后代

import Cookies from 'js-cookie';

function App() {
  let cookie = Cookies.get('mycookie');
  return (
    <div>
      <Router>
        <div>
          {<Switch>
            <Route path="/comp1">
              <Comp1 cookie={cookie} />
            </Route>
            <Route path="/comp2">
              <Comp2 />
            </Route>
          </Switch>}
        </div>
      </Router>
    </div>
  );
}

在组件中通过 props 访问

const { cookie } = props;

或者您可以使用 Context API 并创建一个 cookie 上下文

export const CookieContext = React.createContext();

应用程序

import Cookies from 'js-cookie';

function App() {
  let cookie = Cookies.get('mycookie');
  return (
    <div>
      <Router>
        <div>
          <CookieContext.Provider value={cookie}>
            {<Switch>
              <Route path="/comp1">
                <Comp1 />
              </Route>
              <Route path="/comp2">
                <Comp2 />
              </Route>
            </Switch>}
          </CookieContext.Provider>
        </div>
      </Router>
    </div>
  );
}

在组件内部

import { CookieContext } from './CookieContext';

const cookie = useContext(CookieContext);

推荐阅读