React组件如何接收函数作为子元素？

首先纠正你一个误区：当你把函数作为子元素传递给组件时，this.props.children并不是空的，它就是你传递的那个函数本身。你之前遇到的空值情况，大概率是代码实现中的问题（比如访问时机不对、子元素被条件渲染逻辑过滤等）。举个简单的验证例子：

class ComponentA extends React.Component {
  componentDidMount() {
    // 直接调用子元素函数，能正常打印Hello World
    this.props.children();
  }
  render() {
    return null;
  }
}

// 使用方式
<ComponentA>
  {() => console.log("Hello World")}
</ComponentA>

接下来看ProModeContext.Consumer的工作逻辑：它是React Context API专门设计的、以函数作为子元素为核心用法的组件，这种模式属于“function as child”（是render props模式的一种变体）。

它的内部实现逻辑可以简化理解为这样：

// 简化版Consumer实现
class Consumer extends React.Component {
  // 订阅Context的变化，当Context值更新时重新渲染
  componentDidMount() {
    this.context.subscribe(() => this.forceUpdate());
  }

  render() {
    // 1. 获取当前Context的最新值
    const currentContextValue = this.context.value;
    // 2. 调用传入的函数子元素，把Context值作为参数传递
    // 3. 渲染函数返回的JSX结果
    return this.props.children(currentContextValue);
  }
}

回到你提供的代码，当你写：

<ProModeContext.Consumer>
  {contextData => <button disabled={!contextData.proMode} ... />}
</ProModeContext.Consumer>

这里的箭头函数就是Consumer组件的props.children。Consumer组件会在内部获取ProModeContext的最新值，然后调用这个箭头函数，把contextData（即当前的Context值）作为参数传入，最终渲染箭头函数返回的<button>元素。

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