Question

这是我的反应渲染功能渲染：函数（）{

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


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

这给了我这个错误＆＃34; JSX：错误：解析错误：第22行：意外的令牌：＆＃34;

这里有什么问题？我可以将完整的普通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>
);

DEMO：http://jsfiddle.net/chantastic/69z2wepo/329/

注意：JSX不支持样式属性的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

创建一个函数来处理插入样式标记。
将您想要的CSS添加到字符串变量中。

将变量添加到<style>标记内的返回JSX。

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

Answer 6

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

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


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

Answer 7

这就是我所做的：

  render(){
    var styleTagStringContent = 
    ".rr {"+
       "color:red"+
    "}";
    return (
      <style type="text/css">
        {styleTagStringContent}
      </style>
    );

Answer 8

import styled from 'styled-components;

return (
 <div>
  <Test>something</Test>
 </div>
)

下一步：

const Test = styled.p`
  color: red
`;

渲染时React JSX样式标记错误

8 个答案: