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

Question

这似乎是一种最佳实践，因为几乎所有地方都在使用它。但是，没有地方清楚地说明它的确切作用...

我确实在文档中找到一条注释，其中说：“此注释告诉babel将jsx转换为对名为jsx的函数的调用，而不是React.createElement”。这是否仅仅意味着它用Emotion取代了标准的React功能？省略/ ** @jsx jsx * /注释是否有任何后果？

Answer 1

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

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

Answer 2

这是一个自定义实用程序，它告诉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传入的prop或其他数据来启用您正在使用的库的功能。

因此，这个问题的答案是：

忽略/ ** @jsx jsx * /是否有任何后果？

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

编辑