如何无需指定props向子组件传值？自定义React Context消费组件

嘿，你说的这种<MyComponent>{value => ...}</MyComponent>用法，其实就是React里非常实用的**渲染props（Render Props）**模式——核心思路就是把组件的children属性当成一个函数，组件内部准备好要传递的数据后，调用这个函数并把数据传进去，函数返回的内容就是最终要渲染的子组件结构。

下面是具体的实现步骤和示例：

1. 基础版组件实现 #

先写一个简单的MyComponent，内部维护要传递的数据（这里用useState模拟，你也可以替换成接口请求数据、全局状态等任意内容）：

import React, { useState } from 'react';

function MyComponent({ children }) {
  // 这里是你要传递给子组件的数据源
  const [sharedValue, setSharedValue] = useState('这是要传递给子组件的数据');

  // 关键逻辑：判断children是否为函数，调用它并传入数据
  if (typeof children === 'function') {
    return children(sharedValue);
  }

  // 容错处理：如果children不是函数，直接返回（避免页面报错）
  return children;
}

2. 组件使用方式 #

使用的时候就和你提到的Context Consumer写法完全一致了：

// 父组件中使用MyComponent
function Parent() {
  return (
    <div>
      <h2>父组件</h2>
      <MyComponent>
        {/* 这里的value就是MyComponent传递出来的sharedValue */}
        {value => (
          <div>
            <p>从MyComponent拿到的数据：{value}</p>
            {/* 把数据传给子组件 */}
            <ChildComponent value={value} />
          </div>
        )}
      </MyComponent>
    </div>
  );
}

// 子组件示例
function ChildComponent({ value }) {
  return <h3>子组件接收到的值：{value}</h3>;
}

3. 进阶：传递多个数据/方法 #

如果需要传递不止一个值，比如同时传递数据和操作数据的方法，只需要在调用函数时传入多个参数即可：

function MyComponent({ children }) {
  const [count, setCount] = useState(0);
  // 定义操作数据的方法
  const incrementCount = () => setCount(prev => prev + 1);
  const decrementCount = () => setCount(prev => prev - 1);

  if (typeof children === 'function') {
    // 传递多个参数：数据+操作方法
    return children(count, incrementCount, decrementCount);
  }
  return children;
}

// 使用时接收多个参数
<MyComponent>
  {(count, increment, decrement) => (
    <div>
      <p>当前计数：{count}</p>
      <button onClick={increment}>加1</button>
      <button onClick={decrement}>减1</button>
    </div>
  )}
</MyComponent>

这种模式和React Context的区别在于：Context主要解决跨层级组件传递数据的问题，而自定义的Render Props组件更偏向于在当前层级内封装数据逻辑并传递给子组件，但它们的核心写法是一致的——都利用了“children作为函数”的特性来传递数据。

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