React 中渲染 Props 的功能组件

百变鹏仔 2个月前 (10-14) #JavaScript

文章标签组件

在 react 中，render props 是一种使用函数 prop 在组件之间共享逻辑的技术。不使用子项或组合，而是将函数作为 prop 传递以动态呈现内容。这种方法适用于功能组件和钩子。

以下是如何使用功能组件实现 render props 的示例：

例子

import React, { useState } from 'react';// The component using render propsconst MouseTracker = ({ render }) =&gt; {  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });  const handleMouseMove = (event) =&gt; {    setMousePosition({      x: event.clientX,      y: event.clientY,    });  };  return (    <div style="{{" height: onmousemove="{handleMouseMove}">      {render(mousePosition)}    </div>  );};// Component that consumes the render propsconst App = () =&gt; {  return (    <div>      <h1>Mouse Tracker</h1>      <mousetracker render="{({" x y> (        <h2>Mouse Position: {x}, {y}</h2>      )}/&gt;    </mousetracker></div>  );};export default App;

解释：

此模式可以更灵活地决定如何根据 mousetracker 组件内部的逻辑呈现内容。

文章推荐

React 中渲染 Props 的功能组件

例子

解释：

JavaScript如何获取宏控件数据？

JavaScript怎样读取宏控件数据？

JavaScript获取宏控件数据的技巧

探究JavaScript与Java的联系和区别

javascript:void(o)如何解决？