React
JSX

Opmerkingen

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

Rekwisieten in JSX

Er zijn verschillende manieren om rekwisieten in JSX op te geven.

JavaScript-uitdrukkingen

U kunt elke JavaScript-expressie als een prop doorgeven door deze te omringen met {} . In deze JSX bijvoorbeeld:

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

Binnen de MyComponent is de waarde van props.count 10 , omdat de uitdrukking 1 + 2 + 3 + 4 wordt geëvalueerd.

Als statements en for loops geen expressies zijn in JavaScript, kunnen ze dus niet rechtstreeks in JSX worden gebruikt.

String Literals

Je kunt natuurlijk ook elke string literal als een prop doorgeven. Deze twee JSX-expressies zijn equivalent:

<MyComponent message="hello world" />

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

Wanneer u een letterlijke tekenreeks doorgeeft, is de waarde ervan HTML-ongeschonden. Dus deze twee JSX-expressies zijn equivalent:

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

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

Dit gedrag is meestal niet relevant. Het wordt hier alleen vermeld voor de volledigheid.

Props Standaardwaarde

Als u geen waarde voor een prop doorgeeft, wordt deze standaard ingesteld op true . Deze twee JSX-expressies zijn equivalent:

<MyTextBox autocomplete />

<MyTextBox autocomplete={true} />

Het React-team zegt echter in hun documenten dat deze aanpak niet wordt aanbevolen , omdat het kan worden verward met het ES6-object steno {foo} dat staat voor {foo: foo} plaats van {foo: true} . Ze zeggen dat dit gedrag er gewoon is, zodat het overeenkomt met het gedrag van HTML.

Spread attributen

Als je al rekwisieten als een object hebt en je wilt dit in JSX doorgeven, kun je ... als een spread-operator gebruiken om het hele rekwisietenobject door te geven. Deze twee componenten zijn gelijkwaardig:

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

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

Kinderen in JSX

In JSX-uitdrukkingen die zowel een openingstag als een sluitingstag bevatten, wordt de inhoud tussen die tags doorgegeven als een speciale prop: props.children . Er zijn verschillende manieren om kinderen te passeren:

String Literals

Je kunt een string tussen de openings- en sluitingstags plaatsen en props.children zijn gewoon die string. Dit is handig voor veel van de ingebouwde HTML-elementen. Bijvoorbeeld:

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

Dit is geldige JSX en props.children in MyComponent is gewoon <h1>Hello world!</h1> .

Houd er rekening mee dat de HTML niet is gewijzigd , dus u kunt over het algemeen JSX schrijven zoals u HTML zou schrijven.

Houd er rekening mee dat JSX in dit geval:

• verwijdert witruimte aan het begin en einde van een regel;
• verwijdert lege regels;
• nieuwe regels naast tags worden verwijderd;
• nieuwe lijnen die zich voordoen in het midden van stringliterals worden gecondenseerd in een enkele ruimte.

JSX Kinderen

U kunt meer JSX-elementen bieden als de kinderen. Dit is handig voor het weergeven van geneste componenten:

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

Je kunt verschillende soorten kinderen met elkaar combineren, zodat je stringliterals samen met JSX-kinderen kunt gebruiken . Dit is een andere manier waarop JSX lijkt op HTML, zodat dit zowel geldige JSX als geldige HTML is:

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

Merk op dat een React-component niet meerdere React-elementen kan retourneren, maar een enkele JSX-expressie kan meerdere kinderen hebben . Dus als u wilt dat een component meerdere dingen weergeeft, kunt u ze in een div wikkelen zoals in het bovenstaande voorbeeld.

JavaScript-uitdrukkingen

U kunt elke JavaScript-expressie als kind doorgeven door deze in {} . Deze uitdrukkingen zijn bijvoorbeeld gelijkwaardig:

<MyComponent>foo</MyComponent>

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

Dit is vaak handig voor het weergeven van een lijst met JSX-expressies van willekeurige lengte. Dit levert bijvoorbeeld een HTML-lijst op:

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

Merk op dat JavaScript-expressies kunnen worden gemengd met andere soorten kinderen.

Functies als kinderen

Normaal gesproken zullen JavaScript-expressies die in JSX zijn ingevoegd, evalueren naar een string, een React-element of een lijst van die dingen. props.children werkt echter net als elke andere prop omdat het elk soort gegevens kan doorgeven, niet alleen de soorten die React weet te renderen. Als u bijvoorbeeld een aangepaste component heeft, kunt u deze terugbellen als 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>;
};

Kinderen die worden doorgegeven aan een aangepast onderdeel kunnen van alles zijn, zolang dat onderdeel ze maar transformeert in iets dat React kan begrijpen voordat het wordt weergegeven. Dit gebruik is niet gebruikelijk, maar het werkt als u wilt uitbreiden wat JSX mogelijk is.

Genegeerde waarden

Merk op dat false , null , undefined en true geldige kinderen zijn. Maar ze worden niet weergegeven. Deze JSX-expressies zullen allemaal hetzelfde weergeven:

<MyComponent />

<MyComponent></MyComponent>

<MyComponent>{false}</MyComponent>

<MyComponent>{null}</MyComponent>

<MyComponent>{true}</MyComponent>

Dit is uiterst nuttig om React-elementen voorwaardelijk weer te geven. Deze JSX geeft alleen een if showHeader weer:

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

Een belangrijk voorbehoud is dat sommige "valse" waarden, zoals het 0 nummer, nog steeds worden weergegeven door React. Deze code gedraagt zich bijvoorbeeld niet zoals u zou verwachten, omdat 0 wordt afgedrukt wanneer props.messages een lege array is:

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

Een manier om dit op te lossen, is om ervoor te zorgen dat de uitdrukking vóór && altijd boolean is:

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

Ten slotte moet u er rekening mee houden dat als u een waarde als false , true , null of undefined in de uitvoer wilt laten verschijnen, u deze eerst naar een string moet converteren:

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