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

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

0 голосов
/ 16 декабря 2018

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

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

Ответы [ 2 ]

0 голосов
/ 16 декабря 2018

Это пользовательская прагма , которая сообщает преобразователю 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#jsx-pragma

0 голосов
/ 16 декабря 2018

Эмоция jsx export позволяет вам поставить опору css на любой компонент и автоматически преобразовать ее в опору className.

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

...