时间戳

首页 > 解决方案 > React 组件函数式

components - React 组件函数式

问题描述

我有一个关于 React 功能组件的问题，特别是关于功能组件中的功能。例如：

    function WorkshopComponent(props) { 

      function renderWorkshopElements() {
           props.elements.map((element) => {return <Element key={element.id} {...element} />})
      }

      return (<div> renderWorkshopElements() </div>) 

    }

我的问题：是否有参数只在组件级函数中使用 props 对象？写这个是不是更好：

function WorkshopComponent(props) { 

      function renderWorkshopElements(elements) {
           elements.map((element) => {return <Element key={element.id} {...element} />})
      }

      return (<div> renderWorkshopElements(props.elements) </div>) 

    }

标签： components

解决方案

我认为这是一个非常好的问题，我想听听其他人的意见。

在您的第一个示例中，您接受了范围的力量，我认为这很好。我个人仅在我的范围内没有值时才在函数中使用参数（例如：事件、数组元素等）

在您的第二个示例中，有趣的是，您甚至不需要将此函数包含在 WorkshopComponent 中，它可以在它旁边声明并且工作相同（渲染明智）。如果你想对这个函数进行单元测试，这很好。

tl；博士：我会说第 1 版在大多数情况下更有意义

推荐阅读