j*ascript如何实现渲染属性_ render props怎么用_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

j*ascript如何实现渲染属性_ render props怎么用

2025-12-15

浏览次数：次

返回列表

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

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

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

render props 是什么？

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

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

怎么写一个 render props 组件？

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

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

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

使用时：

<Counter
  render={({ count, increment }) => (
    <div>
      <p>当前数量：{count}</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/2268">
                            <img src="https://img.php.cn/upload/ai_manual/001/246/273/68b6b69145e34946.png" alt="AI Code Reviewer">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/2268">AI Code Reviewer</a>
                            <p>AI自动审核代码</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="AI Code Reviewer">
                                <span>112</span>
                            </div>
                        </div>
                        <a href="/ai/2268" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="AI Code Reviewer">
                        </a>
                    </div>
                
      <button onClick={increment}>+1</button>
    </div>
  )}
/>

你也可以用 children 代替 render（React 官方推荐方式之一），效果一样：

// 使用 children 作为 render prop
<Counter>
  {({ count, increment }) => (
    <div>
      <span>✅ {count}</span>
      <button onClick={increment}>点我加</button>
    </div>
  )}
</Counter>

常见用法和注意事项

命名灵活：prop 名不必叫 render，叫 children、listItem、loadingRenderer 都可以，关键是它是个函数且被调用
避免内联函数导致重渲染：如果每次 render 都写新函数（如 render={() => ...}），父组件更新时会传新函数，可能让子组件误判为 props 变化。可配合 useCallback 缓存
支持 TypeScript：给 render 函数加上类型，能获得更好的提示和安全检查，例如：render: (props: { count: number; increment: () => void }) => ReactNode
不是必须用 render prop：现代 React 更推荐用自定义 Hook（如 useCounter()）替代，更简洁、无额外组件嵌套；render props 适合需要跨层级传递渲染逻辑，或兼容 class 组件的场景

和 children 与普通 props 的区别

普通 props 传的是静态值或回调函数；children 本身可以是任意 React 节点（文本、元素、数组、函数）；当 children 是函数 时，它就构成了 render props 模式。所以本质上，children 是最自然的 render prop 实现方式，无需额外约定 prop 名。

例如：<dataloader>{(data) => <list items="{data}/">}</list></dataloader> —— 这就是典型的 render props 应用，比写一堆配置项清晰得多。