在 React 中，可以通过状态提升（lifting state up）的方式将局部变量变成全局变量。具体来说，可以将该局部变量定义在共同的父组件中，然后通过 props 将其传递给需要使用该变量的子组件。这样，子组件就可以通过 props 访问到该变量，实现了全局变量的效果。 另外，如果需要在多个组件中共享某个变量，还可以使用 React 的上下文（Context）机制，将变量存储在上下文中，然后在需要使用该变量的组件中通过 useContext 钩子来获取该变量。这样，就可以避免通过层层传递 props 来实现变量共享的繁琐过程。 写个案例

好的，以下是一个使用 React 上下文（Context）共享变量的案例：

假设我们有一个组件 `A`，以及它的两个子组件 `B` 和 `C`，它们都需要使用一个共同的变量 `theme`，我们可以使用 React 上下文（Context）机制来将 `theme` 存储在上下文中，并在需要使用该变量的子组件中通过 useContext 钩子来获取该变量。

import React, { createContext, useContext, useState } from "react";

const ThemeContext = createContext("light");

function A(props) {
  return (
    <div>
      <p>子组件 B 中的 theme 值为：{useContext(ThemeContext)}</p>
      <p>子组件 C 中的 theme 值为：{useContext(ThemeContext)}</p>
    </div>
  );
}

function B(props) {
  return (
    <div>
      <p>子组件 B 中的 theme 值为：{useContext(ThemeContext)}</p>
    </div>
  );
}

function C(props) {
  return (
    <div>
      <p>子组件 C 中的 theme 值为：{useContext(ThemeContext)}</p>
    </div>
  );
}

function App() {
  const [theme, setTheme] = useState("light");

  return (
    <ThemeContext.Provider value={theme}>
      <p>父组件中的 theme 值为：{theme}</p>
      <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
        切换主题
      </button>
      <A />
    </ThemeContext.Provider>
  );
}

export default App;

在上面的代码中，我们首先使用 `createContext` 函数创建了一个名为 `ThemeContext` 的上下文对象，并将其初始值设为 `"light"`。然后，在组件 `A` 中通过 `useContext` 钩子来获取 `ThemeContext` 上下文中的值，并将其显示出来。同样的，子组件 `B` 和 `C` 中也使用了相同的方式来访问 `ThemeContext` 中的值。

在父组件 `App` 中，我们将 `theme` 变量存储在 `ThemeContext` 的 `Provider` 中，并通过 `value` 属性将其传递给子组件。当我们点击父组件中的切换主题按钮时，`theme` 变量的值会更新，并且子组件中的 `theme` 值也会相应地更新。

这就是一个简单的 React 上下文共享变量的案例，通过这种方式，我们可以避免通过层层传递 props 来实现变量共享的繁琐过程，并将变量存储在上下文中，让需要使用该变量的组件可以方便地获取到它。