reactjs - React.Children.map 递归？

Question

我正在构建一个用于渲染 HTML 表单的 React 组件，并且我发现需要递归地迭代父 Form 组件的所有子组件，以便仅向特定类型的子组件添加额外的 props。

示例(JSX 中):

<Form>
    <p>Personal Information</p>
    <Input name="first_name" />
    <Input name="last_name" />
    <Input name="email" />
    <Label>
        Enter Your Birthday
        <Input name="birthday" type="date" />
    </Label>
</Form>

在此示例中，我在 Form 组件中使用 React.Children.map，然后在映射函数中检查子项的“type”和子项的“type.displayName”以确定我要使用哪个元素我正在处理(原生 HTML 元素或 ReactElement):

var newChildren = React.Children.map(this.props.children, function(child) {
    if (is.inArray(child.type.displayName, supportedInputTypes)) {
      var extraChildProps = {
        alertColor: this.props.alertColor,
        displayErrors: this.state.displayErrors
      }
      return React.cloneElement(child, extraChildProps);
    } else {
      return child;
    }
  }.bind(this));

我的问题是 React.Children.map 仅浅层迭代 this.props.children，我希望它也检查 child 的 child 的 child 等。我需要仅向我的输入组件添加 Prop ，以便他们知道何时显示错误，以及应该显示错误消息的颜色等。在上面的示例中，生日输入没有收到必要的 Prop ，因为它被包装在 Label 组件中。

React.Children.map 是否有“递归”模式或任何其他实用程序可以完成我想做的事情的计划？

最终，我想编写一个函数来映射每个子项(甚至嵌套的子项)，以便对其执行操作(在本例中为克隆)。

Answer 1

虽然没有融入 React，但这当然是可能的:

import React from "react";

function recursiveMap(children, fn) {
  return React.Children.map(children, child => {
    if (!React.isValidElement(child)) {
      return child;
    }

    if (child.props.children) {
      child = React.cloneElement(child, {
        children: recursiveMap(child.props.children, fn)
      });
    }

    return fn(child);
  });
}

如果您想避免复制/粘贴以上内容，您也可以使用 this npm package我创作。