javascript - Emotion CSS-in-JS 库中的 comment/** @jsx jsx */有什么作用？

Question

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

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

Answer 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}`);
  }
}

但是通过使用自定义编译指示，编译后的 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