Как вложить JavaScript код и псевдо- HTML элементы на нескольких уровнях?

Question

Я не читал подобное правило, но вот как оно работает?

Мы можем написать

return <ul>{this.state.numbers.map(a => <li>{a}</li>)}</ul>;

, а правило:

1. Когда мы видим первое слово return, оно является обычным JS
2. Когда мы находимся в обычном режиме JS, мы можем начинать любой «псевдо-HTML тег», и когда он становится <ul>, это «псевдо- HTML режим тега», и у нас не может быть никакого обычного JS кода, если только мы не начнем другой {
3. Теперь, когда у нас есть {, мы вернулись в обычном режиме JS, но мы можем снова начать использовать любой <div> или <li>, но пока они не «закрыты» или не имеют конечного конечного тега, он останется "режим псевдо- HTML тега".
4. Так вот почему у нас может быть <li>, но затем, чтобы снова использовать любой код JS, нам снова нужно запустить {

Так что, возможно, это можно резюмировать так: мы можем написать любой обычный JS код, и даже <div> et c можно считать JS кодом, но пока он не имеет закрыто с фина l </div>, тогда мы не сможем снова иметь обычный код JS, если только мы не начнем с {. И затем, мы можем снова иметь обычный JS код и свободно начинать другой <span> или любой другой. Когда этот <span> закрылся с </span>, мы можем использовать обычный код JS; но перед этим, если нам нужно снова использовать любой обычный код JS, нам нужно снова начать {.

Так ли это работает? Это упоминается в любых документах JSX?

Answer 1

На самом деле, как вы упомянули, это JSX, и вы не можете написать простой JavaScript код внутри (как if-else, для et c.). Когда мы конвертируем ваш код, используя babel, кажется, что

function render() {
  return _react.default.createElement("ul", null, this.state.numbers.map(function (a) {
    return _react.default.createElement("li", null, a);
  }));
}

Как видите, теги elements . и мы можем сказать, что частично да, вот как это работает.

вы можете использовать Babel jsx convert

еще одну полезную ссылку о jsx. 6 правил JSX: живая шпаргалка