这是我的react渲染功能
render:function(){
return (
<div>
<p className="rr">something</p>
<style>
.rr{
color:red;
}
</style>
</div>
)
}
这给了我这个错误
“JSX：错误：解析错误：第 22 行：意外标记：”
这里有什么问题？我可以将完整的普通 css 嵌入到 react 组件中吗？
易于使用 es6 模板字符串（允许换行）。在您的渲染方法中：
const css = `
.my-element {
background-color: #f00;
}
`
return (
<div class="my-element">
<style>{css}</style>
some content
</div>
)
至于用例，我正在为带有一些复选框的 div 执行此操作，这些复选框用于调试，我希望将其包含在一个文件中以便以后轻松删除。
JSX 只是 javascript 的一个小扩展，它不是它自己完整的模板语言。所以你会像在 javascript 中那样做：
return (
<div>
<p className="rr">something</p>
<style>{"\
.rr{\
color:red;\
}\
"}</style>
</div>
)
然而，完全没有充分的理由这样做。
内联样式最好直接应用于组件 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
这可以通过使用反引号“`”来完成，如下所示
return (<div>
<p className="rr">something</p>
<style>{`
.rr{
color:red;
}
`}</style>
</div>)