reactjs - 是否有更简单的语法在消费者中使用上下文变量？

Question

<ThemeContext.Consumer>
  {({theme, toggleTheme}) => (
    <button
      onClick={toggleTheme}
      style={{backgroundColor: theme.background}}>
      Toggle Theme
    </button>
  )}
</ThemeContext.Consumer>

我从 here 得到了上面的代码.

是否有其他编写第二行的方法？在我看来，大括号与圆括号混合有点奇怪，我想知道是否有其他书写方式。

Answer 1

• useContext

您可以使用useContext钩子(Hook)，它可以让您读取上下文并订阅其更改，当您想要订阅多个上下文的更改时，这非常方便:

function ThemeTogglerButton() {
  const { theme, toggleTheme } = useContext(ThemeContext); 
  const { ... } = useContext(AnotherContext); 

  return (
    <button
      onClick={toggleTheme}
      style={{backgroundColor: theme.background}}>
      Toggle Theme
    </button>
  );
}

useContext

• HOC

第二种方法是创建 HOC，它允许您将上下文作为 props 注入(inject)到组件中:

withTheme.jsx(HOC):

export const withTheme = Component => props => (
  <ThemeContext.Consumer>
    {contextProps => <Component {...props} {...contextProps} />}
  </ThemeContext.Consumer>
);

ThemeTogglerButton.jsx:

import { withTheme } from "./withTheme"

const ThemeTogglerButton = ({ theme, toggleTheme }) => {
  return (
    <button onClick={toggleTheme} style={{ backgroundColor: theme.background }}>
      Toggle Theme
    </button>
  );
}

export default withTheme(ThemeTogglerButton);

App.jsx:

import ThemeTogglerButton from "./ThemeTogglerButton";

const App = () => (
  <ThemeContext.Provider value={...}>
    <ThemeTogglerButton />
  </ThemeContext.Provider>
)