Emotion CSS-in-JS 库中的注释 /** @jsx jsx */ 做了什么？

Question

这似乎是最佳做法，因为它几乎无处不在。但是，没有任何地方清楚地解释它到底做了什么......

我确实在 docs 中找到了一条评论： "This comment tells babel to convert jsx to calls to a function called jsx instead of React.createElement"。这是否仅仅意味着它用 Emotion 取代了标准的 React 功能？遗漏 /** @jsx jsx */ 评论有什么后果吗？

Answer 1

情感 jsx export 允许您将 css 属性放在任何组件上，并自动将其转换为 className 属性。

/** @jsx jsx */ 告诉 Babel 调用 jsx 变量而不是你刚刚从 emotion

导入的 React.createElement

Answer 2

这是一个 custom pragma 告诉 jsx 转换器，在这种情况下 babel-plugin-transform-react 使用什么函数将你的 jsx 转换为纯文本 javascript。

来自React Website：

一个使用 jsx 的 React 组件，如下所示：

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 传入的 props 或其他数据。

所以这个问题的答案是：

Are there any consequences from leaving out the /** @jsx jsx */

是的。它可能会破坏库的功能。

编辑

这里的 emotion 文档中提到了这一点：https://emotion.sh/docs/css-prop#jsx-pragma

Emotion CSS-in-JS 库中的注释 /** @jsx jsx */ 做了什么？

What does the comment /** @jsx jsx */ do in the Emotion CSS-in-JS library?

javascript

css

emotion

reactjs

css-in-js