Saltar al contenido

apoyos que pasa a this.props.children en ReactSep, 11thIn este tutorial, vamos a aprender acerca de cómo pasar los apoyos a …

marzo 13, 2020

 

En este tutorial, vamos a aprender acerca de cómo pasar los puntales en tothis.props.children reaccionan.

En reaccionar this.props.children se usa para pasar los datos (componentes, elementos) entre la apertura y el cierre de las etiquetas JSX.

Considere que tenemos los dos componentes infantil y Aplicación en el que necesitamos para pasar el método logMe a todos sus componentes hijos.

import React,{Component} from 'react';

const Child = (props)=>{
return (

Child {props.index}

)
}

class App extends Component{
logMe =()=>{ console.log('Hii child') }
render(){
return (

{this.props.children}

)}
}

ReactDOM.render(
,document.getElementById('root')
);

En general, se puede pasar el método logMe a los componentes del niño por el uso de accesorios, pero en nuestro caso, estamos utilizando this.props.children por lo que no tenemos una manera directa para pasar los datos.

React.Children.map y React.cloneElement

Reaccionar nos ofrece dos métodos React.Children.map y React.cloneElement mediante el uso de estos métodos podemos iterar sobre cada uno de los niños y clonar el que cada elemento reacciona con nuestros accesorios. La actualización de

Let nuestro código mediante el uso de estos dos métodos.

import React, { Component } from "react";
import ReactDOM from "react-dom";

const Child = props => {
return (

Child {props.index}

);
};

class App extends Component {
logMe = () => {
console.log("Hii child");
};

render() {
const updateChildrenWithProps = React.Children.map( this.props.children, (child, i) => { return React.cloneElement(child, { /his properties are available as a props in child components logMe: this.logMe, index: i }); } );
return

{updateChildrenWithProps}

; }
}

ReactDOM.render(



,
document.getElementById("root")
);

En el código anterior, pasamos método logMe, propiedad de índice niño a todos los componentes utilizando la React.cloneElement.

Salida: