css - 标记错误 : React JSX Style Tag Error on Render

Question

这是我的 react 渲染函数

render:function(){
  return (
    <div>
      <p className="rr">something</p>
      <style>
        .rr{
          color:red;
        }
      </style>
    </div>    
  )
}

这给了我这个错误

"JSX: Error: Parse Error: Line 22: Unexpected token :"

这是怎么回事？我可以将完整的普通 css 嵌入到 React 组件中吗？

Answer 1

使用 es6 模板字符串很容易做到(允许换行)。在您的渲染方法中:

const css = `
    .my-element {
        background-color: #f00;
    }
`

return (
    <div class="my-element">
        <style>{css}</style>
        some content
    </div>
)

至于用例，我正在为一个带有一些用于调试的复选框的 div 执行此操作，我想将其包含在一个文件中以便以后轻松删除。