css - react 内联css直接在html输出中放置括号

Question

我正在尝试在 react 中使用内联样式，这是我使用 create-react 应用程序创建的。

从我所看到的，以下内容应该可以正常工作:

<div id="root" style={{ height: 'auto' }}></div>

但是，当我运行 yarn start 时，HTML 中的输出如下:



当我在 chrome 中选择“编辑 html”时，它看起来像这样:

<div id="root" style="{{" height:="" 'auto'="" }}="">

为什么是我的 {{ }}不工作？我错过了什么吗？还是 create-react-app 需要在 webpack 或 babel 中额外配置一些东西？

也许相关，我已经运行 eject 但据我所知，没有更改任何可能影响此的默认设置。

Answer 1

你在style attribute之间混淆在 JSX和 style attribute in HTML .

// HTML @ index.html
<div style="background: blue; height: 50px; width: 50px;"/>

// JSX @ Component.js
<div style={{ background: 'blue', height: 50, width: 50 }} />

// Transpiled to
React.createElement("div", {
  style: {
    background: 'blue',
    height: 50,
    width: 50
  }
});