react 全局属性设置

React 全局属性设置可以使用 `ReactDOM.render()` 函数的第三个参数，该参数是一个回调函数，可以用来设置全局属性。在回调函数中，可以通过第一个参数获取到根组件的 DOM 元素，然后设置全局属性。

例如，如果要设置全局样式，可以在回调函数中获取根组件的 DOM 元素，并设置样式：

ReactDOM.render(
  <App />,
  document.getElementById('root'),
  function () {
    const rootElement = document.getElementById('root');
    rootElement.style.backgroundColor = '#f0f0f0';
  }
);

另外，也可以使用 React 提供的 `Context` API 来设置全局属性。通过在根组件中创建一个 `Context` 对象，然后在需要使用全局属性的组件中使用 `Context.Consumer` 来获取属性值。

例如，如果需要在多个组件中使用全局主题颜色，可以创建一个 `ThemeContext`：

const ThemeContext = React.createContext('light');

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Header />
      <Main />
      <Footer />
    </ThemeContext.Provider>
  );
}

function Header() {
  return (
    <ThemeContext.Consumer>
      {theme => (
        <header style={{ backgroundColor: theme === 'dark' ? '#333' : '#eee' }}>
          ...
        </header>
      )}
    </ThemeContext.Consumer>
  );
}

function Main() {
  return (
    <ThemeContext.Consumer>
      {theme => (
        <main style={{ color: theme === 'dark' ? '#fff' : '#333' }}>
          ...
        </main>
      )}
    </ThemeContext.Consumer>
  );
}

function Footer() {
  return (
    <ThemeContext.Consumer>
      {theme => (
        <footer style={{ backgroundColor: theme === 'dark' ? '#333' : '#eee' }}>
          ...
        </footer>
      )}
    </ThemeContext.Consumer>
  );
}

通过设置 `ThemeContext.Provider` 的 `value` 属性，可以在整个组件树中传递主题颜色，然后在需要使用主题颜色的组件中，通过 `ThemeContext.Consumer` 获取主题颜色并应用到组件样式中。这样就可以实现全局主题颜色的设置和应用。