Render Props 里怎么传递多个参数？

开发者婉琳提问于 2026-03-31 11:05:13 阅读 3

框架

我在用 Render Props 模式复用逻辑，但发现只能传一个 children 函数，想同时传数据和回调函数咋办？试过 {(data) => ...} 只能拿到一个参数。

比如下面这个例子，我想在 render props 里同时暴露 count 和 setCount，但不知道语法该怎么写：

const Counter = ({ render }) => {
  const [count, setCount] = useState(0);
  return render(count); // 这里只能传一个值
};

// 使用时
<Counter render={(count) => <div>{count}</div>} />

React 性能优化

我来解答赞 0 收藏

反馈

1 条解答

硕阳（打工版） Lv1

这个问题其实挺常见的，Render Props 本身的设计就是传递一个函数作为子组件。但很多人不知道这个函数是可以接收多个参数的。

先检查一下你的 render 函数调用，其实可以直接传多个参数进去。你只需要在 render 函数里把需要的参数都列出来：

const Counter = ({ render }) => {

  const [count, setCount] = useState(0);

  return render(count, setCount); // 直接传两个参数

};

然后在使用的时候，记得解构接收这些参数：

<Counter render={(count, setCount) => (

  <div>

    <p>Count: {count}</p>

    <button onClick={() => setCount(count + 1)}>Increment</button>

  </div>

)} />

这样就能同时拿到 count 和 setCount 了。说实话 Render Props 这种写法一开始确实让人有点懵，不过习惯了就好。要是觉得太麻烦，也可以考虑用 hook 来实现类似的功能，代码会更简洁些。

2026-03-31 11:06