Saltar al contenido

¿Hay alguna forma de renderizar múltiples componentes de React en la función React.render ()?

Solución:

Desde el lanzamiento de React v16.0, puede renderizar una matriz de componentes sin envolver elementos en un elemento adicional cuando está dentro de un componente:

render() {
  return [
    <li key="one">First item</li>,
    <li key="two">Second item</li>,
    <li key="three">Third item</li>,
    <li key="four">Fourth item</li>,
  ];
}

Recuerde solo configurar las claves.

ACTUALIZAR

Ahora desde la versión 16.2 puedes usar los Fragmentos

  render() {
    return (
      <React.Fragment>
        <td>Hello</td>
        <td>World</td>
      </React.Fragment>
    );
  }

Sintaxis corta

  render() {
    return (
      <>
        <td>Hello</td>
        <td>World</td>
      </>
    );
  }

En el ReactDOM.render todavía no puede renderizar varios elementos porque react necesita una raíz. Para que pueda renderizar un solo componente dentro del ReactDOM.render y renderizar una matriz de elementos en el componente interno.

Reaccionar> = 16,2

Desde la versión 16.2 <React.Fragment /> (o <></> para abreviar) se introdujo, por lo que puede utilizar condiciones.

Esta es la forma preferible.

return (
    <React.Fragment>
        <h1>Page title</h1>
        <ContentComponent />
        {this.props.showFooter && (
            <footer>(c) stackoverflow</footer>
        )}
    </React.Fragment>
)

Reaccionar 16

Desde React 16, puede regresar de la render() método una lista de componentes. El cambio es que no puede condicionar fácilmente el renderizado y necesita agregar key atributo a cada componente de la lista.

return [
    <h1 key="page-title">Page</h1>,
    <ContentComponent key="content" />,
    <footer>(c)stackoverflow</footer>
]

Reaccionar <16

En versiones anteriores de React, no puede renderizar varios componentes sin envolverlos en un elemento adjunto (etiqueta, componente). p.ej:

return (
  <article>
    <h1>title</h1>
    <meta>some meta</meta>
  </article>
)

Si desea utilizarlos realmente como un solo elemento, debe crear un módulo a partir de ellos.

Simplemente envuelva sus múltiples componentes en una sola etiqueta. Por ejemplo:

React.render(
  <div>
    <PanelA />
    <PanelB />
  </div>, 
  document.body  
);
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *