CSS 标签错误：渲染时反应 JSX 样式标签错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27530462/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Tag Error: React JSX Style Tag Error on Render
提问by user48545
This is my react render function
这是我的反应渲染功能
render:function(){
return (
<div>
<p className="rr">something</p>
<style>
.rr{
color:red;
}
</style>
</div>
)
}
This gives me this error
这给了我这个错误
"JSX: Error: Parse Error: Line 22: Unexpected token :"
“JSX：错误：解析错误：第 22 行：意外标记：”
What's wrong here? Can I embed full normal css into a react component?
这里有什么问题？我可以将完整的普通 css 嵌入到 react 组件中吗？
采纳答案by Esailija
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:
JSX 只是 javascript 的一个小扩展，它不是它自己完整的模板语言。所以你会像在 javascript 中那样做：
return (
<div>
<p className="rr">something</p>
<style>{"\
.rr{\
color:red;\
}\
"}</style>
</div>
)
However there is absolutely no good reason to do this at all.
然而，完全没有充分的理由这样做。
回答by Sebastian
Easy to do with es6 template strings (which allows line breaks). In your render method:
易于使用 es6 模板字符串（允许换行）。在您的渲染方法中：
const css = `
.my-element {
background-color: #f00;
}
`
return (
<div class="my-element">
<style>{css}</style>
some content
</div>
)
As for use case I'm doing this for a div with some checkboxes that I'm using for debugging, that I would like to contain within one file for easy removal later.
至于用例，我正在为带有一些复选框的 div 执行此操作，这些复选框用于调试，我希望将其包含在一个文件中以便以后轻松删除。
回答by chantastic
Inline-styles are best applied directly to the component JSX template:
内联样式最好直接应用于组件 JSX 模板：
return (
<div>
<p style={{color: "red"}}>something</p>
</div>
);
DEMO: http://jsfiddle.net/chantastic/69z2wepo/329/
演示：http: //jsfiddle.net/chantastic/69z2wepo/329/
Note: JSX does not support HTML syntax for the style attribute
注意：JSX 不支持 style 属性的 HTML 语法
Declare properties in using camelCase property names, e.g.,
使用camelCase属性名称声明属性，例如，
{ color: "red", backgroundColor: "white" }
Further reading here: http://facebook.github.io/react/tips/inline-styles.html
进一步阅读：http: //facebook.github.io/react/tips/inline-styles.html
回答by Tyler McGinnis
"class" is a reserved word in JavaScript. Instead use "className".
“class”是 JavaScript 中的保留字。而是使用“className”。
Also, you have to remember you're using JSX, not HTML. I don't believe jsx will parse your tags. A better approach is to create an object with your styles then apply that as the style (see below).
此外，您必须记住您使用的是 JSX，而不是 HTML。我不相信 jsx 会解析你的标签。更好的方法是使用您的样式创建一个对象，然后将其应用为样式（见下文）。
var styles = {
color:"red";
}
return (
<div>
<p style={styles}>something</p>
</div>
)
回答by Kamran Syed
This can be done by using backtick "`" as below
这可以通过使用反引号“`”来完成，如下所示
return (<div>
<p className="rr">something</p>
<style>{`
.rr{
color:red;
}
`}</style>
</div>)
回答by Michael J. Calkins
- Create a function to handle inserting the style tag.
- Add the CSS you want to a string variable.
Add the variable to the returned JSX inside of your
<style>tag.renderPaypalButtonStyle() { let styleCode = "#braintree-paypal-button { margin: 0 auto; }" return ( <style>{ styleCode }</style> ) }
- 创建一个函数来处理插入样式标签。
- 将您想要的 CSS 添加到字符串变量中。
将变量添加到
<style>标签内返回的 JSX 。renderPaypalButtonStyle() { let styleCode = "#braintree-paypal-button { margin: 0 auto; }" return ( <style>{ styleCode }</style> ) }
回答by Con Antonakos
This is what I did:
这就是我所做的：
render(){
var styleTagStringContent =
".rr {"+
"color:red"+
"}";
return (
<style type="text/css">
{styleTagStringContent}
</style>
);
