learn - reactjs instalar

React.Children.map recursivamente?

Question

Estoy creando un Componente React para representar un formulario HTML y encuentro la necesidad de iterar recursivamente a través de todos los componentes del formulario primario de mi hijo para agregar elementos adicionales solo a los componentes secundarios de un determinado Tipo.

Un ejemplo (en 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>

En este ejemplo, estoy usando React.Children.map dentro de mi componente de Formulario, y luego dentro de la función de mapa, estoy revisando el "tipo" del niño y el "tipo.displayName" del niño para determinar con qué elemento estoy tratando (ya sea un elemento HTML nativo o un 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));

Mi problema es que React.Children.map solo itera superficialmente a través de this.props.children, y me gustaría que también verifique a los hijos de los hijos de los niños, etc. Necesito agregar accesorios a solo mis componentes de entrada para que sepan cuándo. para mostrar errores, y de qué color debe mostrarse el mensaje de error, etc. En el ejemplo anterior, la entrada de cumpleaños no recibe los accesorios necesarios, ya que está envuelta en un componente de Etiqueta.

¿Hay algún plan para que React.Children.map tenga un modo "recursivo" o cualquier otra utilidad que pueda lograr lo que estoy tratando de hacer?

Al final del día, me gustaría escribir una función única que se asigna a través de cada uno de los niños (incluso los que están anidados) para realizar una operación (en este caso, la clonación).

Answer 1

Este hilo en realidad pierde la respuesta correcta:

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

Answer 2

He hecho una pequeña biblioteca para tratar con la estructura de los niños. Puede comprobar aquí:

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

En tu caso puedes usar el método 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 3

La respuesta corta a esto es que actualmente no es posible a partir de Reacción 0.14. Como mencionó FakeRainBrigand, es más que probable que se trate de un olor de código de todos modos, por lo que debería solicitar una reevaluación de su implementación.

Answer 4

Si bien no está cocido en React, esto es ciertamente posible:

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 5

Si está buscando empujar accesorios en un conjunto de hijos bajo su componente "automáticamente", también puede usar el context . Esto le permite "dar" propiedades, funciones, etc. a componentes secundarios proporcionándolos desde el padre con childContextTypes y getChildContext() , y haciendo que el hijo los "solicite" con contextTypes .