标签错误：渲染时出现 React JSX 样式标签错误答案

【问题标题】：Tag Error: React JSX Style Tag Error on Render标签错误：渲染时出现 React JSX 样式标签错误
【发布时间】：2015-02-16 06:56:04
【问题描述】：

这是我的反应渲染函数

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

这给了我这个错误

“JSX：错误：解析错误：第 22 行：意外令牌：”

这里有什么问题？我可以将完整的普通 css 嵌入到反应组件中吗？

【问题讨论】：

相关帖子here。

标签： css reactjs

【解决方案1】：

易于使用 es6 模板字符串（允许换行）。在您的渲染方法中：

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

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

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

【讨论】：

最干净的解决方案
完美解决方案！谢谢

【解决方案2】：

JSX 只是 javascript 的一个小扩展，它不是它自己成熟的模板语言。所以你会像在 javascript 中那样做：

return (
  <div>
    <p className="rr">something</p>

      <style>{"\
        .rr{\
          color:red;\
        }\
      "}</style>
  </div>
)

http://jsfiddle.net/r6rqz068/

但是完全没有充分的理由这样做。

【讨论】：

这样做有充分的理由，只是不适用于最常见的用例。
@oskarth 你能详细说明一下吗？
@Esailija 例如，在一个 CMS 中，您想要调出一个颜色管理员来更改整个页面“实时”的 CSS。您将拥有一个动态
我能想到一个很好的理由来做这件事……当某物的长度可变时定义 CSS 过渡。如果您只是覆盖“left”属性，您将不会获得 CSS 过渡，但如果您重命名一个类，您会。 AFAIK
这有无数种用途，比如生成关键帧动画。

【解决方案3】：

内联样式最好直接应用于组件 JSX 模板：

return (
  <div>
    <p style={{color: "red"}}>something</p>
  </div>
);

演示：http://jsfiddle.net/chantastic/69z2wepo/329/

注意：JSX 不支持 style 属性的 HTML 语法

使用 camelCase 属性名称声明属性，例如，

{ color: "red", backgroundColor: "white" }

在此处进一步阅读：http://facebook.github.io/react/tips/inline-styles.html

【讨论】：

我认为你是对的.. :( 但它说它支持facebook.github.io/react/docs/tags-and-attributes.html
我会从答案中删除那部分。
谢谢，为了解决更大的问题，我想解决一个更大的问题是有一个反应组件，它接受一个 css 文件，解析它并将其作为渲染组件的一部分输出.. 内联样式不会在这种情况下工作
Facebook 员工兼 React 贡献者 Christopher Chedeau 在本次演讲中谈到了该特定问题的解决方案。 speakerdeck.com/vjeux/react-css-in-js 我相信他们使用 Webpack 加载器来实现这一点：webpack.github.io
webpack 很棒，但它解决了依赖管理问题，这并不是真正的问题。附加上下文 - 我试图在服务器端这样做（因此将文件引用作为输入），renderToString 方法是我打算在客户端上呈现的内容..但这需要能够处理正常的 css（例如bootstrap) 并嵌入它。

【解决方案4】：

这可以通过使用反引号“`”来完成，如下所示

return (<div>
        <p className="rr">something</p>


          <style>{`
            .rr{
              color:red;
            }
          `}</style>
  </div>)

【讨论】：

【解决方案5】：

“class”是 JavaScript 中的保留字。而是使用“className”。

此外，您必须记住您使用的是 JSX，而不是 HTML。我不相信 jsx 会解析你的标签。更好的方法是使用您的样式创建一个对象，然后将其应用为样式（见下文）。

var styles = {
  color:"red";
}

return (
  <div>
    <p style={styles}>something</p>
  </div>    
)

【讨论】：

正确（已更新），但这不是问题所在。探针是将 vanilla css 注入到 react js 组件中。
谢谢，为了解决更大的问题，我想解决一个更大的问题是有一个反应组件，它接受一个 css 文件，解析它并将其作为渲染组件的一部分输出.. 内联样式不会在这种情况下工作
这没有回答原始问题。这与内联样式无关。
@CazumaNiiCavalcanti 它确实回答了最初的问题（你知道，2014 年提出的问题）。它没有回答已编辑的问题。
@TylerMcGinnis 哦，好的。对不起。

【解决方案6】：

创建一个函数来处理样式标签的插入。
将所需的 CSS 添加到字符串变量中。

将变量添加到 <style> 标记内返回的 JSX。

renderPaypalButtonStyle() {
    let styleCode = "#braintree-paypal-button { margin: 0 auto; }"
    return (
        <style>{ styleCode }</style>
    )
}

【讨论】：

这是一个优雅的解决方案

【解决方案7】：

这就是我所做的：

render(){
    var styleTagStringContent = 
    ".rr {"+
       "color:red"+
    "}";
    return (
      <style type="text/css">
        {styleTagStringContent}
      </style>
);

【讨论】：

【解决方案8】：

import styled from 'styled-components;

return (
 <div>
  <Test>something</Test>
 </div>
)

下一步：

const Test = styled.p`
  color: red
`;

【讨论】：