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

Question

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

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

score 23 · Accepted Answer

这是一个自定义 pragma，它告诉 jsx 转换器，在这种情况下babel-plugin-transform-react，使用什么函数将您的 jsx 转换为纯 javascript。

一个使用 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 或其他数据，以某种方式启用您正在使用的库的功能。

因此，这个问题的答案：

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

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

编辑

这在此处的情感文档中有所提及：https ://emotion.sh/docs/css-prop#jsx-pragma

score 7 · Accepted Answer

情感jsx导出允许您将css道具放在任何组件上，并使其自动转换为 className 道具。

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

2 回答 2