为了父母，用道具注释反应孩子答案

【问题标题】：Annotating react children with props for the sake of the parent为了父母，用道具注释反应孩子
【发布时间】：2018-03-18 19:06:50
【问题描述】：

仅使用属性注释反应组件的子级以向所述组件提供信息是否被认为是不好的做法？例如，假设我有一个导航组件，它需要每个子组件的名称。

<Nav>
<Child name="child1"/>
<Child name="child2"/>
</Nav>

这里的 'name' 属性仅供 Nav 使用。我能想到的唯一另一种方法是将名称数组作为属性传递给 nav ，其中每个元素都包含相应子索引的名称，但这很脆弱且声明性较差。或者，我可以为导航提供子元素的名称映射，而不是依赖于 props.children ，但这看起来很难看。以这种方式做事感觉很自然但也没有反应，我是否违反了一些最佳实践或成语？如果是这样，我应该如何实现这样的东西？

【问题讨论】：

你说的丑是什么意思？只接受 props 的组件称为无状态组件，在 React 中是完全标准的
`
"child2": }}/> ` 比 `
` 在我看来。后者类似于标准 HTML 布局并指示如何使用子元素。前者的声明性较差，需要阅读代码的人阅读 Nav 才能完全理解 elMap 的使用方式。我的问题主要是后者是否可以接受。
你可以像const children = ['child1', 'child2']; const renderList = children.map(child=><Child key={child} name={child} />)这样实现它，因为没有其他参数，它们是同一个组件。
Hermes，你是说Nav 组件在每个子节点上使用name 属性，而Child 组件不需要name 属性？
@brentatkins 是正确的。这将是在没有框架的情况下完成它的自然方式，因为标记是正确的声明性（名称与子元素而不是导航元素相关联），但是我怀疑它可能在 React 中不受欢迎（如果是，我会比如澄清基本原理是什么）。

标签： javascript reactjs

【解决方案1】：

作为一般原则，我只向需要它们的组件添加道具。因此，在您的情况下，如果 Child 组件需要它，我只会添加 name 道具。在父元素中看到组件上的道具，却找不到使用它的子组件，这会很混乱。

您的方法的替代方法是创建一个包装子组件。您可以创建一个 NavItem 包装器，这样使用：

<Nav>
  <NavItem name="child1">
    <Child />
  </NavChild>
  <NavItem name="child2">
    <Child />
  </NavChild>
</Nav>

NavItem 不需要渲染任何标记，而是只渲染子项。

const NavItem = (props) => props.children;

这样，您的父 Nav 组件将获得一个具有所需道具的子组件，并且您不会使用它不期望的道具弄脏子组件。

【讨论】：

我看不出这比直接向孩子添加自定义属性更干净。它不能解决您提到的问题（它只会添加更多标记），因为 Nav 组件仍需要检查新创建的 NavItem 组件的 'name' 属性，这在某种意义上违反了相同类型的 'name ' 不是 NavItem 直接使用的，而是 Nav 直接使用的。