React.Children.map рекурсивно?

Question

Я создаю компонент React для отображения HTML-формы, и я нахожу необходимость рекурсивно перебирать все дочерние элементы родительского компонента Form, чтобы добавить дополнительные реквизиты только для дочерних компонентов определенного типа.

Пример (в 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> 

В этом примере я использую React.Children.map внутри моей форме компоненты, а затем внутри функции карты я проверяю «тип ребенка "и ребенка„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 только неглубоко перебирает это .props.children, и я хотел бы, чтобы он также проверял детей детей детей и т. д. Мне нужно добавить реквизиты только к моим компонентам ввода, чтобы они знали, когда показывать ошибки, и какой цвет выводить сообщение об ошибке, и т. Д. В приведенном выше примере вход дня рождения не получает необходимые реквизиты, потому что это завернутый в компонент Label.

Любой план для React.Children.map должен иметь «рекурсивный» режим или любую другую утилиту, которая может выполнить то, что я пытаюсь сделать?

В конце дня я хотел бы написать одну функцию, которая отображает каждую дочернюю (даже вложенную), чтобы выполнить операцию над ней (в этом случае клонирование).

Answer 1

Короткий ответ на этот вопрос заключается в том, что в настоящее время это не возможно в отношении Реагирования 0.14. Как упоминал FakeRainBrigand, это, скорее всего, запах кода, так что это должно побуждать к переоценке вашей реализации.

Answer 2

Если вы хотите надавить реквизиты на набор детей под своим компонентом «автоматически», вы также можете использовать context. Это позволяет вам «давать» свойства, функции и т. Д. Дочерним компонентам, предоставляя их от родителя childContextTypes и getChildContext() и имея дочерний «запрос» их с contextTypes.

Answer 3

Пока не запеченный в 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); 
    }); 
} 

Answer 4

Я сделал небольшую библиотеку, чтобы иметь дело со структурой детей. Вы можете проверить его здесь:

https://github.com/fernandopasik/react-children-utilities

В вашем случае вы можете использовать метод deepMap:

import React from 'react'; 
import Children from 'react-children-utilities'; 

var newChildren = Children.deepMap(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)); 

Answer 5

Эта нить фактически не попадает в правильный ответ:

const mapRecursive = (children, callback) => (
    React.Children.map(
    children, 
    child => (
     child.props.children 
     ? [callback(child), mapRecursive(child.props.children, callback)] 
     : callback(child) 
    ), 
) 
);