标签错误：渲染时反应JSX样式标签错误 [英] Tag Error: React JSX Style Tag Error on Render

问题描述

这是我的react渲染函数

This is my react render function

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

这给了我这个错误

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

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

这是怎么了？
我可以将完整的普通CSS嵌入到react组件中吗？

What's wrong here? Can I embed full normal css into a react component?

推荐答案

JSX只是javascript的一个小扩展，它是而不是自己完整的模板语言。因此，您可以像在javascript中那样操作：

JSX is only a small extension to javascript, it's not its own full blown templating language. So you would do it like in javascript:

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

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

http://jsfiddle.net/r6rqz068/

但是，绝对没有充分的理由这样做。

However there is absolutely no good reason to do this at all.

这篇关于标签错误：渲染时反应JSX样式标签错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！