如何与组件共享变量

Question

主应用程序如下所示：

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中做一次操作，然后与组件共享所有这些操作。

Answer 1

你可以把它作为道具传给需要它的子孙。

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;

或者，您可以使用上下文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);