@Pantene742

Как работает метод render() в React?

Насколько я знаю, в JS передача параметра такого типа не поддерживается. return возращает в скобках html код и не в кавичках, и не в ` ` как строку.
React компилятор перед сборкой парсит данные в файлах компонентов(а именно те что возращает функция render) и переводит их в рабочую форму для ES6 , или же это нормально для ES6. (Я понимаю что реакт собирает все в ES2015 )
render() {
    return (
      <Row className="show-grid">
        <Col md={6}>
          <h2>Est. total</h2>
        </Col>
        <Col md={6}>
          <h2>{`$${this.props.price}`}</h2>
        </Col>
      </Row>
    );
  }
  • Вопрос задан
  • 3454 просмотра
Решения вопроса 1
rockon404
@rockon404 Куратор тега React
Frontend Developer
return возращает в скобках html код

return не возвращает html код. JSX это лишь синтаксический сахар над JavaScript.

JSX вида:
render() {
  return (
    <h1 className="greeting">
      Hello, world!
    </h1>
  );
}

транслируется в JS вида:
render() {
  return React.createElement(
    'h1',
    { className: 'greeting' },
    'Hello, world!'
  );
}

результат выполнения render в этом случае будет следующий:
{
  $$typeof: Symbol(react.element),
  key: null,
  props: { className: "greeting", children: "Hello, world!" },
  ref: null,
  type: "h1",
  _owner: null,
  _store: { validated: false },
  _self: null,
  _source: null,
  __proto__: Object,
}

Возвращаемый объект это Virtual DOM Node. По ней библиотека создает элемент в реальном DOM.


React компилятор перед сборкой парсит данные в файлах компонентов...
...Я понимаю что реакт собирает все в ES2015...

React ничего не собирает. Никаких компиляторов библиотека не имеет. Процесс преобразования JSX в JS называется не компиляцией, а транспиляцией. Транспиляцию JSX в JS выполняют с помощью babel/TypeScript, а сборку обычно осуществляют с помощью библиотеки webpack.

или же это нормально для ES6

Нет. JSX не входит в спецификацию ECMAScript 2015
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы