React
JSX

Observaciones

class HelloMessage extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

ReactDOM.render(<HelloMessage name="Kalo" />, mountNode);

class HelloMessage extends React.Component {
  render() {
    return React.createElement(
      "div",
      null,
      "Hello ",
      this.props.name
    );
  }
}

ReactDOM.render(React.createElement(HelloMessage, { name: "Kalo" }), mountNode);

const element = <h1>Hello, world!</h1>;

Puntales en JSX

Hay varias formas diferentes de especificar props en JSX.

Expresiones de JavaScript

Puedes pasar cualquier expresión de JavaScript como prop, al rodearla con {} . Por ejemplo, en este JSX:

<MyComponent count={1 + 2 + 3 + 4} />

Dentro de MyComponent , el valor de props.count será 10 , porque se evalúa la expresión 1 + 2 + 3 + 4 .

Si las declaraciones y los bucles no son expresiones en JavaScript, no se pueden usar directamente en JSX.

Literales de cuerda

Por supuesto, también puedes pasar cualquier string literal como prop . Estas dos expresiones JSX son equivalentes:

<MyComponent message="hello world" />

<MyComponent message={'hello world'} />

Cuando se pasa un literal de cadena, su valor no se guarda en HTML. Así que estas dos expresiones JSX son equivalentes:

<MyComponent message="&lt;3" />

<MyComponent message={'<3'} />

Este comportamiento no suele ser relevante. Sólo se menciona aquí para completar.

Valor predeterminado de accesorios

Si no pasa ningún valor para un objeto, el valor predeterminado es true . Estas dos expresiones JSX son equivalentes:

<MyTextBox autocomplete />

<MyTextBox autocomplete={true} />

Sin embargo, el equipo de React dice que no se recomienda el uso de este documento en sus documentos, ya que puede confundirse con la abreviatura del objeto ES6 {foo} que es la abreviatura de {foo: foo} lugar de {foo: true} . Dicen que este comportamiento está ahí para que coincida con el comportamiento de HTML.

Atributos de propagación

Si ya tiene objetos como objeto y desea pasarlos a JSX, puede usar ... como operador de extensión para pasar todo el objeto de objetos. Estos dos componentes son equivalentes:

function Case1() {
  return <Greeting firstName="Kaloyab" lastName="Kosev" />;
}

function Case2() {
  const person = {firstName: 'Kaloyan', lastName: 'Kosev'};
  return <Greeting {...person} />;
}

Niños en JSX

En las expresiones JSX que contienen una etiqueta de apertura y una etiqueta de cierre, el contenido entre esas etiquetas se pasa como un elemento especial: props.children . Hay varias maneras diferentes de pasar a los niños:

Literales de cuerda

Puede colocar una cadena entre las etiquetas de apertura y cierre y props.children solo será esa cadena. Esto es útil para muchos de los elementos HTML integrados. Por ejemplo:

<MyComponent>
    <h1>Hello world!</h1>
</MyComponent>

Esto es JSX válido, y props.children en MyComponent simplemente será <h1>Hello world!</h1> .

Tenga en cuenta que el HTML no se puede escapar , por lo que generalmente puede escribir JSX como lo haría con HTML.

Ten en cuenta que en este caso JSX:

• elimina los espacios en blanco al principio y al final de una línea;
• elimina las líneas en blanco;
• Se eliminan las nuevas líneas adyacentes a las etiquetas;
• Las nuevas líneas que se producen en medio de cadenas literales se condensan en un solo espacio.

Niños jsx

Puede proporcionar más elementos JSX como los hijos. Esto es útil para mostrar componentes anidados:

<MyContainer>
  <MyFirstComponent />
  <MySecondComponent />
</MyContainer>

Puedes mezclar diferentes tipos de niños, así que puedes usar literales de cuerdas junto con niños JSX . Esta es otra forma en la que JSX es como HTML, de modo que es tanto JSX válido como HTML válido:

<div>
  <h2>Here is a list</h2>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</div>

Tenga en cuenta que un componente React no puede devolver varios elementos React, pero una sola expresión JSX puede tener varios hijos . Entonces, si quieres que un componente genere varias cosas, puedes envolverlo en un div como el ejemplo anterior.

Expresiones de JavaScript

Puede pasar cualquier expresión de JavaScript como hijos, encerrándola dentro de {} . Por ejemplo, estas expresiones son equivalentes:

<MyComponent>foo</MyComponent>

<MyComponent>{'foo'}</MyComponent>

Esto suele ser útil para representar una lista de expresiones JSX de longitud arbitraria. Por ejemplo, esto hace que una lista HTML:

const Item = ({ message }) => (
  <li>{ message }</li>
);

const TodoList = () => {
  const todos = ['finish doc', 'submit review', 'wait stackoverflow review'];
  return (
    <ul>
      { todos.map(message => (<Item key={message} message={message} />)) }
    </ul>
  );
};

Tenga en cuenta que las expresiones de JavaScript se pueden mezclar con otros tipos de niños.

Funciones como niños

Normalmente, las expresiones de JavaScript insertadas en JSX se evaluarán como una cadena, un elemento React o una lista de esas cosas. Sin embargo, props.children funciona igual que cualquier otro apoyo, ya que puede pasar cualquier tipo de datos, no solo los tipos que React sabe cómo renderizar. Por ejemplo, si tiene un componente personalizado, podría hacer que tome una devolución de llamada como props.children :

const ListOfTenThings = () => (
  <Repeat numTimes={10}>
    {(index) => <div key={index}>This is item {index} in the list</div>}
  </Repeat>
);

// Calls the children callback numTimes to produce a repeated component
const Repeat = ({ numTimes, children }) => {
  let items = [];
  for (let i = 0; i < numTimes; i++) {
    items.push(children(i));
  }
  return <div>{items}</div>;
};

Los niños pasados ​​a un componente personalizado pueden ser cualquier cosa, siempre que ese componente los transforme en algo que React pueda entender antes de renderizar. Este uso no es común, pero funciona si desea ampliar lo que JSX es capaz de hacer.

Valores ignorados

Tenga en cuenta que false , null , undefined y true son hijos válidos. Pero simplemente no se renderizan. Estas expresiones JSX se representarán todas a la misma cosa:

<MyComponent />

<MyComponent></MyComponent>

<MyComponent>{false}</MyComponent>

<MyComponent>{null}</MyComponent>

<MyComponent>{true}</MyComponent>

Esto es extremadamente útil para renderizar condicionalmente los elementos React. Este JSX solo muestra si showHeader es verdadero:

<div>
  {showHeader && <Header />}
  <Content />
</div>

Una advertencia importante es que React sigue procesando algunos valores "falsos", como el número 0 . Por ejemplo, este código no se comportará como cabría esperar porque se imprimirá 0 cuando props.messages es una matriz vacía:

<div>
  {props.messages.length &&
    <MessageList messages={props.messages} />
  }
</div>

Un enfoque para solucionar esto es asegurarse de que la expresión antes de && siempre sea booleana:

<div>
  {props.messages.length > 0 &&
    <MessageList messages={props.messages} />
  }
</div>

Por último, recuerde que si desea que aparezca un valor como false , true , null o undefined en la salida, primero debe convertirlo en una cadena:

<div>
  My JavaScript variable is {String(myVariable)}.
</div>