传递样式对象时Context的工作机制及代码中Context传递解析

嘿，咱们一步步把这个逻辑拆明白：

1. Context是怎么从Greeting传到getStyle的？ #

其实这个传递过程非常直接，完全没有绕弯子：

• 当React渲染你的Greeting组件时，会自动把组件订阅的Context数据作为第二个参数传给这个箭头函数组件（也就是你代码里的context参数）。这个Context数据通常是通过React的Context API（比如createContext创建上下文、Provider提供数据）来实现跨组件共享的。
• 在Greeting组件内部，你调用getStyle(context)的时候，直接把组件收到的context原封不动地传给了getStyle的形参context——就这么简单！相当于把一个变量从函数A传到函数B，没有额外的魔法。

2. 这会如何影响样式对象的color属性？ #

getStyle返回的样式对象里，color属性的值完全依赖于传入的context对象：

• 如果传入的context里有color字段（比如{ color: 'darkgreen' }），那样式里的color就会用这个值，最终渲染的<div>文字颜色就是深绿色，同时字体加粗。
• 如果context里没有color字段，或者context本身是undefined（比如组件没订阅任何Context），那color的值会是undefined，这时候文字颜色会继承父元素的默认样式。

举个完整的场景例子帮你理解：

// 先创建一个主题上下文
const ThemeContext = React.createContext({ color: 'black' });

// 用Provider给子组件提供上下文数据
function App() {
  return (
    <ThemeContext.Provider value={{ color: 'royalblue' }}>
      <Greeting name="Alice" />
    </ThemeContext.Provider>
  );
}

// 让Greeting订阅这个上下文（这样组件的第二个context参数才会有值）
Greeting.contextType = ThemeContext;

// 你的原始代码
const getStyle = context => ({ fontWeight: "bold", color: context.color });
const Greeting = (props, context) => <div style={getStyle(context)}>{props.name}</div>;

在这个例子里，Greeting收到的context是{ color: 'royalblue' }，传给getStyle后，返回的样式是{ fontWeight: "bold", color: "royalblue" }，最终页面上会显示加粗的蓝色文字"Alice"。要是你把Provider的value改成{ color: 'crimson' }，那文字颜色会立刻变成深红色——因为context变了，getStyle返回的color也跟着同步变化。

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