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

Posted 2023-02-22

【中文标题】标签错误：渲染时出现 React JSX 样式标签错误

【英文标题】：Tag Error: React JSX Style Tag Error on Render

【发布时间】：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。

【参考方案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
`;