javascript - shouldcomponentupdate - react.createelement example

¿Hay una manera de representar múltiples componentes React en la función React.render()?

Question

Por ejemplo podría hacer:

import React from ''react'';
import PanelA from ''./panelA.jsx'';
import PanelB from ''./panelB.jsx'';

React.render( 
  <PanelA />
  <PanelB />, 
  document.body  
);

donde React renderizaría:

body
   PanelA
   PanelB

Actualmente estoy recibiendo el error:

Adjacent JSX elements must be wrapped in an enclosing tag

Mientras se transpila con browserify y babelify

Answer 1

Reaccionar> = 16.2

Desde la versión 16.2 puede usar < React.Fragment /> , por lo que puede usar 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 devolver desde el método render() una lista de componentes. El comercio de es no puede condicionar fácilmente el procesamiento y es necesario agregar key atributo key 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 representar múltiples componentes sin envolverlos en un elemento envolvente (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.

Answer 2

Antes de React 16, varios elementos de nivel superior en el mismo render() requerirían que envuelvas todo en un elemento padre (normalmente un <div> ):

render () {
  return (
    <div>
      <Thing1 />
      <Thing2 />
    </div>
  )
}

React 16 introdujo la capacidad de representar una matriz de elementos de nivel superior (con una advertencia de que todos deben tener claves únicas):

render () {
  return ([
    <Thing1 key=''thing-1'' />,
    <Thing2 key=''thing-2'' />
  ])
}

React 16.2 introdujo el elemento <Fragment> , que funciona exactamente igual que <div> en el primer ejemplo, pero no deja a un padre sin sentido <div> colgando alrededor del DOM:

import React, { Fragment } from ''react''

...

render () {
  return (
    <Fragment>
      <Thing1 />
      <Thing2 />
    </Fragment>
  )
}

Hay una sintaxis abreviada para ella, pero aún no es compatible con la mayoría de las herramientas (por ejemplo, resaltadores de sintaxis):

import React from ''react''

...

render () {
  return (
    <>
      <Thing1 />
      <Thing2 />
    </>
  )
}

Answer 3

Desde la versión React v16.0, puede representar una serie 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>,
  ];
}

Recuerda solo poner las teclas.

En ReactDOM.render , todavía no puede renderizar varios elementos porque reaccion necesita una raíz. Por lo tanto, puede representar un solo componente dentro de ReactDOM.render y generar una matriz de elementos en el componente interno.

Answer 4

Si desea representar varios componentes, debe anidarlos entre sí para mantener la estructura de árbol. Esto se explica en su página de documentos para componentes múltiples

En última instancia, siempre que haya un Nodo en el nivel superior puede funcionar.

Podría usar un solo elemento DOM como <div>

  <div>
    <PanelA />
    <PanelB />
  </div>

Sin embargo, a medida que crea aplicaciones más complejas y tiene más componentes de interconexión, puede que le resulte mejor envolver los componentes secundarios de forma similar a uno principal

import React from ''react'';
import PanelA from ''./panelA.jsx'';
import PanelB from ''./panelB.jsx'';

var PanelHolder = React.createClass({
  render: function() {
    return (
      <div>
        <PanelA />
        <PanelB />
      </div>
    )
  }
});

Y luego en tu archivo js principal, harías:

import React from ''react'';
import PanelHolder from ''./panelHolder.jsx'';

React.render( 
  <PanelHolder /> 
  document.body  
);

Answer 5

Solo envuelve tus múltiples componentes en una sola etiqueta. Por ejemplo:

React.render(
  <div>
    <PanelA />
    <PanelB />
  </div>, 
  document.body  
);