javascript如何实现渲染属性_ render props怎么用

Render Props 是一种组件设计模式，通过 props 传入函数来决定渲染内容，用于逻辑复用且保持调用方渲染控制权；核心是函数式 prop（如 render 或 children），接受数据并返回 JSX。

JavaScript 中的“渲染属性”（Render Props）不是 React 的内置 API，而是一种组件设计模式，核心思想是：**通过 props 传入一个函数，由该函数决定如何渲染内容**。它常用于逻辑复用，比如共享状态、事件处理、数据获取等，同时保持渲染控制权在调用方。

render props 是什么？

所谓 render props，就是组件接收一个名为 render（或任意名字，如 children、itemRenderer）的 prop，这个 prop 是一个函数，组件内部在合适时机调用它，并把需要的数据作为参数传进去，最终把函数返回的 JSX 渲染出来。

它和高阶组件（HOC）、自定义 Hook 的目标一致——复用逻辑，但更灵活、更显式，也更容易调试。

怎么写一个 render props 组件？

以一个简单的计数器为例，它管理 state 和 click 逻辑，但不关心怎么展示：

立即学习“Java免费学习笔记（深入）”；

const Counter = ({ render }) => {
  const [count, setCount] = useState(0);
  const increment = () => setCount(c => c + 1);

  // 把数据和行为作为参数，交给 render 函数决定怎么渲染
  return render({ count, increment });
};

使用时：

标签： react javascript java js node typescript 回调函数 区别