Usar accesorios para pasar datos a y desde los componentes de React es la forma más conveniente.
¿Qué es un accesorio? Nuestro marcado en los componentes se define como sigue:
12345678910111213141516clase ComponenteChildextendsReact.Componente{render(){retorno(<div>Componente infantil </div.;)}}claseParentextendsReact.Componente{render(){retorno(<Child/)}}javascript
Resultaría en..:
1Componente infantil
javascript
El padre es el componente del padre del hijo; el hijo es el componente del hijo de los padres, y el hijo de hecho se encuentra dentro de los padres. Así es como el padre puede representar al hijo:
1234567classParentextendsReact.Componente{render(){retorno(<Nombre del niño="chrisps"/;}}}javascript
Algunas cosas adicionales fueron añadidas en el componente Hijo por Padre. Es similar a añadir un ID en HTML div, como . El atributo ID tiene un valor crispado. De hecho, cada elemento es un objeto de clase HTMLElement.
El motor del navegador analiza la etiqueta de arriba y como resultado, se crean instancias de HTMLElement para cada etiqueta. Cada etiqueta en HTML está asociada con un HTMLElement correspondiente:
javascript
Todos estos HTMLElements tienen un HTMLElement de superclase. Los métodos y propiedades de estos HTMLElements se utilizan para fines de representación y para manipular datos.
123456789HTML*Element- appendChild - attributes - getAttribute - hasAttribute - innerHTML - innerText - setAttribute...
javascript
El ejemplo anterior daría lugar a HTMLDivElement como se muestra a continuación:
12const divElement =newHTMLDivElement()divElement.setAttribute("name", "chrisps")javascript
El objeto de utilería establecerá el nombre del atributo como se muestra a continuación:
123props ={ nombre: "chrisps"}javascript
Esto se pasará por la clase de componentes de Reaccionar al Niño.
1234classChildextendsReact.Componente{constructor(es)}...}javascript
A continuación, permitirá el acceso al valor de los atributos del componente Child utilizando este.props.name:
123456classChildextendsReact.Componente{constructor(es) {log(this.props.name)// chrisps}...}javascript
Como React está basado en JSX, la compilación de Parent resultaría en esto:
1234567<Nombre del niño="chrisps"/|||| vReact.createElement(Niño,{ nombre: "chrisps"})javascript
El primer parámetro de React createElement es el elemento a renderizar. El segundo representa un objeto que tiene los atributos del elemento. La salida del createElement es un literal de objeto que contiene ambos parámetros. El literal de objeto puede ser un elemento real o una clase. React comprueba el literal del objeto durante el proceso de renderizado. Si el literal object es una clase, React instancializa la clase usando la palabra clave new passing en el objeto props y llama a la función render.
123456789101112131415161718const objType =React.createElement(Child,{ nombre: "chrisps"})if(IS_ELEMENT(objType)){//...}else{if(IS_CLASS(objType)){const klass = objType.component;// klass holds the Child class "class Child extends React.Component {...}"const props = objType. props;// props contiene { nombre: "chrisps" }, los atributos pasados al componente Child en el componente Parent "<Child name="chrisps" /> "const k =newklass(props);// aquí, it(klass) es instanciado y props es pasado a él. k.componentWillMount(); k.render(); k.componentDidMount();//...}}javascript
El código anterior muestra cómo React renderiza un componente o un elemento. Hay que tener en cuenta que el código sólo muestra cómo los argumentos de props son recibidos por los componentes. Lo primero es comprobar si objType es una clase o un elemento. El método IS_ELEMENT(…) lo compara con la lista de todos los elementos HTML. Si es igual que uno de los elementos, devuelve true, lo que indica que el objType es un elemento. En caso contrario, se puede deducir que es una clase. Si el objType es una clase, desestructura los puntales y la clase del objType. Luego crea un objeto de la clase usando la palabra clave new y pasando los props.Así, podemos ver que el componente Parent ha enviado datos a Child.How can Child send back data to Parent? Utiliza el método de render props para enviar datos a su padre Parent.
Es un concepto a través del cual una función se pasa al componente infantil como accesorios. Puede ser una cadena, un objeto, un número o una matriz que se pasa al componente hijo como accesorios. Las funciones también se pueden pasar como accesorios de la siguiente manera:
12345678910111213<Child func={()=.
javascript
En el código anterior, una función {} => {log{"render props"}} se pasa al componente Niño usando un accesorio llamado func. El componente Niño puede usar esta función a través de func en los accesorios. Como sabemos que es una función, podemos llamarla añadiendo (). Ahora que ya estamos familiarizados con el funcionamiento de los props de render, vamos a trabajar en el componente hijo y ver cómo puede enviar datos al padre.
123456789101112131415161718192021222324classParentextendsReact.Componente{constructor(){esta.salida=esta.salida.bind(this)}salida(){log("Hola desde el componente React!")}render(){retorno(<Child func={this. output}/{{i}}}classChildextendsReact.Componente{constructor(props)} {}render(){retorno(<div)};Componente Child{i};botón onClick={this.props.func}{i};SendDataToParent</botón{i};}}javascript
El componente padre tiene un método ligado a su instancia. El uso de bind(this) restringe a JS a ejecutar la función dentro del ámbito de la clase, objeto o función. Por lo tanto, la función seguiría pudiendo acceder a las propiedades y métodos definidos en la clase Parent, incluso cuando se ejecuta fuera de la clase Parent.el método de salida se pasa al componente Child. Se puede acceder al componente Child a través de la propiedad func en el props.el componente Child tiene un botón, Send to Parent , con un evento onclick asociado establecido para llamar al método de salida. Ahora este.props.func en el componente Hijo llamará al método de salida en el componente Padre:
1this.props.func===newParent().output
javascript
El botón de clic en Enviar a Padre en Hijo invoca este.props.func {this.props.func(evt)}, que eventualmente hace referencia al método de salida en Padre. La función de salida se ejecuta {output(evt)} y se imprime lo siguiente en la pantalla:
1Hi there fromReact component!
javascript
La línea de arriba muestra que el componente Niño puede ahora comunicarse con su padre. El código puede ser modificado para enviar datos de Niño a su padre, Padre.
12345678910111213141516171819202122232425262728293031classParentextendsReact.Componente{constructor(){esta.salida=esta.salida.bind(this)this. state={ count:0}}output(evt){log("Hola desde el componente React!")this.setState({count:this.state.count+ evt})}render(){return(<div><h1 ];Count:{this. state.count}</h1 ]};Child func={this.output}/&&&&div ];}}classChildextendsReact. Componente{constructor(props){}render(){regresar(www. child.com)};Componente de niño{N-botón onClick={(evt)={N-este.props.func(Math.random())}{Nenviar datos a los padres</botón
javascript
Se añade un estado a Padre con un recuento de propiedad. Cuando se hace clic en el botón Send to Parent , se genera un número aleatorio que se pasa a this.props.func. El método de salida en el componente Parent obtiene el valor en el argumento evt y actualiza el estado de conteo usando this.setState(...).y así es como un componente hijo puede enviar datos de vuelta a su padre.Así, podemos ver que el padre puede comunicarse con el hijo usando props, y el hijo puede comunicarse con el padre usando render props.el estado del padre se cambió pasando una función al componente hijo y llamando a esa función dentro del hijo.los props y los props de render tienen un comportamiento similar; sólo difieren en su concepto. El render props se usa para enviar lógica de render entre componentes. Pero en este caso, se usa para enviar datos del componente hijo al componente padre.