javascript - 给 child 编号

Question

我有一个菜单组件，我希望能够对该组件中的菜单项进行编号。 (然后使用菜单项编号来跟踪聚焦的菜单项并响应数字键盘的击键。)

我目前的实现看起来像这样:

class Menu extends React.Component {
  numberChildren() {
    return _.chain(React.Children.toArray(this.props.children))
      .filter()
      .map((child, i) => React.cloneElement(child, {
          number: i + 1
      }))
      .value();
  }

  render() {
    return <div className="menu">{this.numberChildren()}</div>;
  }
};

我正在使用 React.cloneElement注入(inject)一个 number Prop ，我正在使用 lodash 的 filter 来排除任何 null children。

这足以处理这样的菜单:

<Menu>
    <MenuItem>Salad</MenuItem>
    <MenuItem>Grilled Chicken</MenuItem>
    {!this.props.isOnDiet && <MenuItem>Ice Cream</MenuItem>}
</Menu>

但是，对于更复杂的 child ，它会失败:

<Menu>
    <MenuItem>Salad</MenuItem>
    <SoupOfTheDayMenuItem/>
    <MenuItem>Grilled Chicken</MenuItem>
</Menu>

SoupOfTheDayMenuItem 是一个包装器组件，它返回单个 MenuItem(也应该被枚举)或 null。

即使 SoupOfTheDayMenuItem 返回 null，它在调用 lodash 的 filter 时仍然是真实的，所以它仍然是数字 2。

有没有办法说“只为实际渲染的 child 注入(inject)这个属性”或“给我一组实际渲染的 child ”？还是有更好的方法来设计所有这些？

Answer 1

我假设 SoupOfTheDayMenuItem 是 MenuItem 的包装器或返回 null。
因此，您可以尝试过滤掉那些 props.children 为假的子项，这意味着 SoupOfTheDayMenuItem 返回 null。

这应该可以完成工作:

numberChildren() {
    return _.chain(React.Children.toArray(this.props.children))
      .filter(child => child.type.displayName == 'MenuItem' || child.props.children)
      .map((child, i) => React.cloneElement(child, {
          number: i + 1
      }))
      .value();
  }