渲染时React JSX样式标记错误

Question

这是我的反应渲染函数渲染:function(){

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

这给了我这个错误"JSX:错误:解析错误:第22行:意外的令牌:"

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

Answer 1

使用es6模板字符串(允许换行)很容易.在你的渲染方法中:

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

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

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

Answer 2

JSX只是javascript的一个小扩展,它不是它自己的全面模板语言.所以你会像在javascript中那样做:

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

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

http://jsfiddle.net/r6rqz068/

然而,完全没有理由这样做.

Answer 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

Answer 4

"class"是JavaScript中的保留字.而是使用"className".

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

var styles = {
  color:"red";
}

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

Answer 5

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

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


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

Answer 6

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

3. 将变量添加到<style>标签内返回的JSX中。

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