Что делает комментарий /** @jsx jsx */ в библиотеке Emotion CSS-in-JS?

Question

Это, кажется, лучшая практика, так как она используется практически везде. Впрочем, нигде четко не объясняется, что именно он делает...

В документах я нашел комментарий, который гласил: "Этот комментарий говорит babel преобразовывать jsx в вызовы функции с именем jsx вместо React.createElement". Означает ли это, что он просто заменяет стандартную функциональность React на Emotion? Есть ли какие-либо последствия, если вы пропустите комментарий /** @jsx jsx */?

Answer 1

Это пользовательская прагма, которая сообщает преобразователь jsx, в данном случае babel-plugin-transform-react какую функцию использовать для преобразования вашего jsx в обычный javascript.

С сайта React:

Компонент React с использованием jsx, который выглядит следующим образом:

class Hello extends React.Component {
  render() {
    return <div>Hello {this.props.toWhat}</div>;
  }
}

Будет преобразовано в это:

class Hello extends React.Component {
  render() {
    return React.createElement('div', null, `Hello ${this.props.toWhat}`);
  }
}

Но используя эту пользовательскую прагму, скомпилированный js может выглядеть так:

class Hello extends React.Component {
  render() {
    return jsx('div', null, `Hello ${this.props.toWhat}`);
  }
}

Это полезно, потому что jsx Функция может каким-то образом включить функциональность используемой вами библиотеки, изменяя или иным образом используя реквизиты или другие данные, передаваемые из jsx.

Поэтому для ответа на этот вопрос:

Есть ли какие-либо последствия от пропуска /** @jsx jsx */

Да. Это, вероятно, нарушит функциональность библиотеки.

РЕДАКТИРОВАТЬ

Это упоминается в документах по эмоциям здесь: https://emotion.sh/docs/css-prop

Answer 2

Эмоция jsx экспорт позволяет поставить css prop для любого компонента и автоматически преобразовать его в className.

/** @jsx jsx */ говорит Бабелу позвонить jsx переменная вместо React.createElement, который вы только что привезли из эмоций