使用ThemeContext.Consumer时，是否有更简洁的上下文变量调用语法？

Great question! That mix of arrow function braces and parentheses can definitely feel awkward when you’re first working with React context. Let’s go through a few cleaner alternatives and more concise ways to access context values.

1. Explicit return with Function Body #

If you prefer more explicit code, you can expand the arrow function to use a full body with a return statement. This removes the need for the outer parentheses around your JSX and makes the flow clearer—especially useful if you need to add extra logic later:

<ThemeContext.Consumer>
  {({ theme, toggleTheme }) => {
    // Add any extra logic here (like conditional checks) if needed
    return (
      <button onClick={toggleTheme} style={{ backgroundColor: theme.background }}>
        Toggle Theme
      </button>
    );
  }}
</ThemeContext.Consumer>

2. Extract to a Named Function #

You can pull the rendering logic out into a separate named function, which makes your Consumer usage cleaner and lets you reuse the function elsewhere in your codebase:

// Define the function outside your component (or in a separate utility file)
function renderThemeToggle({ theme, toggleTheme }) {
  return (
    <button onClick={toggleTheme} style={{ backgroundColor: theme.background }}>
      Toggle Theme
    </button>
  );
}

// Then use it directly in the Consumer
<ThemeContext.Consumer>
  {renderThemeToggle}
</ThemeContext.Consumer>

3. Use the useContext Hook (The Most Concise Option) #

By far the cleanest approach (for React 16.8+) is to ditch the Consumer component entirely and use the useContext Hook. This lets you access context values directly in your functional component without any nested render props:

import { useContext } from 'react';

// Create a reusable button component
const ThemeToggleButton = () => {
  const { theme, toggleTheme } = useContext(ThemeContext);
  
  return (
    <button onClick={toggleTheme} style={{ backgroundColor: theme.background }}>
      Toggle Theme
    </button>
  );
};

// Now you can use this component anywhere without wrapping it in Consumer
<ThemeToggleButton />

This is the modern recommended way to work with context—it keeps your code flat, readable, and avoids the "render prop hell" that can come with nested Consumers.

Quick Note on the Original Syntax #

Just to clarify why that syntax exists: arrow functions let you omit the return keyword and braces when returning a single expression. So () => <JSX> is shorthand for () => { return <JSX>; }. The parentheses around the multi-line JSX are optional, but they help make it clear that the entire block is the returned value.

内容的提问来源于stack exchange，提问作者Blaine Lafreniere