React
JSX

Uwagi

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

Rekwizyty w JSX

Istnieje kilka różnych sposobów określania rekwizytów w JSX.

Wyrażenia JavaScript

Możesz przekazać dowolne wyrażenie JavaScript jako rekwizyt, otaczając je {} . Na przykład w tym JSX:

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

Wewnątrz MyComponent wartość props.count będzie wynosić 10 , ponieważ wyrażenie 1 + 2 + 3 + 4 jest oceniane.

Jeśli instrukcje i pętle nie są wyrażeniami w JavaScript, więc nie można ich używać bezpośrednio w JSX.

Literały smyczkowe

Oczywiście możesz również podać dowolny string literal jako prop . Te dwa wyrażenia JSX są równoważne:

<MyComponent message="hello world" />

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

Gdy przekazujesz literał ciąg, jego wartość nie ma kodu HTML. Zatem te dwa wyrażenia JSX są równoważne:

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

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

To zachowanie zwykle nie jest istotne. Wspomniano tu tylko o kompletności.

Wartość domyślna rekwizytów

Jeśli nie podasz żadnej wartości dla rekwizytu, domyślnie będzie to true . Te dwa wyrażenia JSX są równoważne:

<MyTextBox autocomplete />

<MyTextBox autocomplete={true} />

Jednak zespół React mówi w swoich dokumentach, że stosowanie tego podejścia nie jest zalecane , ponieważ można go pomylić z obiektem ES6 skróconym {foo} który jest skrótem od {foo: foo} zamiast {foo: true} . Mówią, że to zachowanie jest tylko po to, aby pasowało do zachowania HTML.

Rozłóż atrybuty

Jeśli masz już rekwizyty jako obiekt i chcesz przekazać je w JSX, możesz użyć ... jako operatora rozkładania, aby przekazać cały obiekt rekwizytów. Te dwa elementy są równoważne:

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

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

Dzieci w JSX

W wyrażeniach JSX, które zawierają zarówno znacznik otwierający, jak i zamykający, zawartość między tymi znacznikami jest przekazywana jako specjalna prop: props.children . Istnieje kilka różnych sposobów przekazywania dzieci:

Literały smyczkowe

Możesz umieścić ciąg między tagami otwierającymi i zamykającymi, a props.children będą właśnie tym ciągiem. Jest to przydatne w przypadku wielu wbudowanych elementów HTML. Na przykład:

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

Jest to poprawne JSX, a props.children w MyComponent będzie po prostu <h1>Hello world!</h1> .

Zauważ, że HTML jest nieskalowany , więc ogólnie możesz pisać JSX tak, jak piszesz HTML.

Należy pamiętać, że w tym przypadku JSX:

• usuwa białe znaki na początku i na końcu linii;
• usuwa puste linie;
• nowe linie przylegające do znaczników są usuwane;
• nowe wiersze występujące w środku literałów łańcuchowych są skondensowane w jednym miejscu.

JSX Children

Jako elementy potomne możesz podać więcej elementów JSX. Jest to przydatne do wyświetlania zagnieżdżonych komponentów:

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

Możesz mieszać ze sobą różne typy dzieci, dzięki czemu możesz używać literałów łańcuchowych razem z dziećmi JSX . Jest to kolejny sposób, w jaki JSX jest podobny do HTML, więc jest to zarówno poprawny JSX, jak i prawidłowy HTML:

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

Zauważ, że składnik React nie może zwrócić wielu elementów React, ale jedno wyrażenie JSX może mieć wiele elementów potomnych . Jeśli więc chcesz, aby komponent renderował wiele rzeczy, możesz zawinąć je w div jak w powyższym przykładzie.

Wyrażenia JavaScript

Możesz przekazać każde wyrażenie JavaScript jako dziecko, umieszczając je w {} . Na przykład te wyrażenia są równoważne:

<MyComponent>foo</MyComponent>

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

Jest to często przydatne do renderowania listy wyrażeń JSX o dowolnej długości. Na przykład renderuje listę 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>
  );
};

Pamiętaj, że wyrażenia JavaScript mogą być mieszane z innymi typami dzieci.

Funkcje jak dzieci

Zwykle wyrażenia JavaScript wstawione do JSX będą traktowane jako ciąg znaków, element React lub lista tych rzeczy. Jednak props.children działa tak jak każdy inny rekwizyt, ponieważ może przekazywać dowolne dane, a nie tylko te, które React wie, jak renderować. Na przykład, jeśli masz niestandardowy komponent, możesz go oddzwonić jako 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>;
};

Elementy podrzędne przekazane do niestandardowego komponentu mogą być dowolne, o ile ten komponent przekształca je w coś, co React może zrozumieć przed renderowaniem. To użycie nie jest powszechne, ale działa, jeśli chcesz rozszerzyć możliwości JSX.

Ignorowane wartości

Zauważ, że false , null , undefined i true są poprawnymi dziećmi. Ale po prostu nie renderują. Wszystkie te wyrażenia JSX będą renderowane w ten sam sposób:

<MyComponent />

<MyComponent></MyComponent>

<MyComponent>{false}</MyComponent>

<MyComponent>{null}</MyComponent>

<MyComponent>{true}</MyComponent>

Jest to niezwykle przydatne do warunkowego renderowania elementów React. Ten JSX renderuje tylko jeśli showHeader ma wartość true:

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

Jednym ważnym zastrzeżeniem jest to, że niektóre wartości „fałszywe”, takie jak liczba 0 , są nadal renderowane przez React. Na przykład ten kod nie będzie zachowywać się tak, jak można się spodziewać, ponieważ 0 zostanie wydrukowane, gdy props.messages będzie pustą tablicą:

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

Jednym ze sposobów rozwiązania tego jest upewnienie się, że wyrażenie przed && jest zawsze logiczne:

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

Na koniec należy pamiętać, że jeśli chcesz, aby na wyjściu pojawiła się wartość typu false , true , null lub undefined , musisz najpierw przekonwertować ją na ciąg znaków:

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