Emotion CSS-in-JS 库中的注释 /** @jsx jsx */ 有什么作用？答案

【问题标题】：What does the comment /** @jsx jsx */ do in the Emotion CSS-in-JS library?Emotion CSS-in-JS 库中的注释 /** @jsx jsx */ 有什么作用？
【发布时间】：2019-05-17 03:01:24
【问题描述】：

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

我确实在docs 中找到了一条评论： “这条评论告诉 babel 将 jsx 转换为对名为 jsx 而不是 React.createElement 的函数的调用”。这是否仅仅意味着它用 Emotion 替换了标准的 React 功能？省略 /** @jsx jsx */ 评论有什么后果吗？

【问题讨论】：

标签： javascript css reactjs emotion css-in-js

【解决方案1】：

这是一个 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}`);
  }
}

但是通过使用该自定义 pragma，编译后的 js 可能如下所示：

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

这很有用，因为jsx 函数可能通过修改或以其他方式使用从 jsx 传入的 props 或其他数据，以某种方式启用您正在使用的库的功能。

所以这个问题的答案：

省略 /** @jsx jsx */ 有什么后果吗

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

编辑

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

【讨论】：

当我最初用一个简单的例子测试离开编译指示是否会破坏任何东西时，没有任何改变。但我现在用更多功能重新测试了它，它确实坏了。所以谢谢你的详尽回答！
我不确定是否需要将其应用于每个 jsx 文件以使库正常工作，或者是否可以选择性地将其应用于具有导入 @emotion/core 的组件的文件。 @emotion/babel-preset-css-prop 似乎替换了每个文件（或者至少是我检查过的文件）上的 jsx 函数，即使没有导入情感。用情感的批量替换 jsx 函数是否有任何问题/开销？

【解决方案2】：

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

/** @jsx jsx */ 告诉 Babel 调用 jsx 变量而不是 React.createElement，你刚刚从情感中导入

【讨论】：