React
JSX

Osservazioni

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>;

Puntelli in JSX

Esistono diversi modi per specificare oggetti di scena in JSX.

Espressioni JavaScript

Puoi passare qualsiasi espressione JavaScript come supporto, circondandola con {} . Ad esempio, in questo JSX:

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

All'interno di MyComponent , il valore di props.count sarà 10 , poiché viene valutata l'espressione 1 + 2 + 3 + 4 .

Se le istruzioni e i cicli non sono espressioni in JavaScript, non possono essere utilizzate direttamente in JSX.

String letterali

Naturalmente, puoi anche passare qualsiasi string literal come oggetto di prop . Queste due espressioni JSX sono equivalenti:

<MyComponent message="hello world" />

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

Quando si passa una stringa letterale, il suo valore è HTML-escape. Quindi queste due espressioni JSX sono equivalenti:

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

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

Questo comportamento di solito non è rilevante. È solo menzionato qui per completezza.

Valore predefinito puntelli

Se non si passa alcun valore per un sostegno, il valore predefinito è true . Queste due espressioni JSX sono equivalenti:

<MyTextBox autocomplete />

<MyTextBox autocomplete={true} />

Tuttavia, il team di React dice che nei loro documenti l' utilizzo di questo approccio non è raccomandato , perché può essere confuso con l'oggetto ES6 shorthand {foo} che è l'abbreviazione di {foo: foo} piuttosto che di {foo: true} . Dicono che questo comportamento è solo lì in modo che corrisponda al comportamento di HTML.

Spread Attributes

Se hai già oggetti di scena come oggetto e vuoi passarlo in JSX, puoi usare ... come operatore di spread per passare l'intero oggetto oggetti di scena. Questi due componenti sono equivalenti:

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

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

Bambini in JSX

Nelle espressioni JSX che contengono sia un tag di apertura che un tag di chiusura, il contenuto tra questi tag viene passato come puntello speciale: props.children . Esistono diversi modi per passare i bambini:

String letterali

Puoi mettere una stringa tra i tag di apertura e di chiusura e props.children sarà solo quella stringa. Questo è utile per molti degli elementi HTML incorporati. Per esempio:

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

Questo è JSX valido, e props.children in MyComponent sarà semplicemente <h1>Hello world!</h1> .

Nota che l'HTML non ha caratteri maiuscoli , quindi puoi generalmente scrivere JSX proprio come se scrivessi HTML.

Bare a mente, che in questo caso JSX:

• rimuove gli spazi bianchi all'inizio e alla fine di una riga;
• rimuove le righe vuote;
• le nuove righe adiacenti ai tag vengono rimosse;
• le nuove linee che si verificano nel mezzo di stringhe letterali sono condensate in un unico spazio.

JSX bambini

Puoi fornire più elementi JSX come i bambini. Questo è utile per visualizzare i componenti nidificati:

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

È possibile combinare diversi tipi di bambini, quindi è possibile utilizzare letterali stringa insieme ai bambini JSX . Questo è un altro modo in cui JSX è come HTML, quindi questo è sia JSX valido che HTML valido:

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

Si noti che un componente React non può restituire più elementi React, ma una singola espressione JSX può avere più figli . Quindi, se vuoi che un componente mostri più oggetti, puoi avvolgerli in un div come nell'esempio sopra.

Espressioni JavaScript

È possibile passare qualsiasi espressione JavaScript come child racchiudendola entro {} . Ad esempio, queste espressioni sono equivalenti:

<MyComponent>foo</MyComponent>

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

Questo è spesso utile per il rendering di un elenco di espressioni JSX di lunghezza arbitraria. Ad esempio, questo rende un elenco 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>
  );
};

Nota che le espressioni JavaScript possono essere mescolate con altri tipi di bambini.

Funziona da bambino

Normalmente, le espressioni JavaScript inserite in JSX valuteranno una stringa, un elemento React o un elenco di tali elementi. Tuttavia, props.children funziona come qualsiasi altro oggetto di props.children in quanto può passare qualsiasi tipo di dati, non solo quelli che React sa come renderizzare. Ad esempio, se si dispone di un componente personalizzato, è possibile farlo prendere una richiamata come 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>;
};

I bambini passati a un componente personalizzato possono essere qualsiasi cosa, purché quel componente li trasformi in qualcosa che React può capire prima del rendering. Questo utilizzo non è comune, ma funziona se si desidera ottimizzare ciò di cui JSX è capace.

Valori ignorati

Si noti che false , null , undefined e true sono figli validi. Ma semplicemente non rendono. Queste espressioni JSX renderanno tutte la stessa cosa:

<MyComponent />

<MyComponent></MyComponent>

<MyComponent>{false}</MyComponent>

<MyComponent>{null}</MyComponent>

<MyComponent>{true}</MyComponent>

Questo è estremamente utile per rendere condizionalmente gli elementi di React. Questo JSX esegue il rendering solo se showHeader è true:

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

Un avvertimento importante è che alcuni valori "falsi", come il numero 0 , sono ancora resi da React. Ad esempio, questo codice non si comporta come ci si potrebbe aspettare perché 0 verrà stampato quando props.messages è un array vuoto:

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

Un approccio per risolvere questo problema è assicurarsi che l'espressione prima di && sia sempre boolean:

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

Infine, tieni a mente che se vuoi che un valore come false , true , null o undefined appaia nell'output, devi prima convertirlo in una stringa:

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