reactjs – React.Children.map递归？

我正在构建一个用于呈现HTML表单的React组件,并且我发现需要递归遍历我的父Form组件的所有子项,以便仅向某个Type的子组件添加额外的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,然后在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浅层迭代,我希望它也能检查孩子的孩子等等.我需要只为我的输入组件添加道具,以便他们知道什么时候显示错误,以及应显示错误消息的颜色等.在上面的示例中,生日输入不会收到必要的道具,因为它包装在Label组件中.

React.Children.map的任何计划都有一个“递归”模式或任何其他实用程序,可以完成我正在尝试做的事情？

在一天结束时,我想编写一个函数来映射每个孩子(甚至是嵌套的孩子),以便对它进行操作(在这种情况下是克隆).

虽然没有融入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);
  });
}

reactjs – React.Children.map递归？

相关文章