Question

我希望在我的反应js代码 return（）

中有一个样式标记

return(
  <style> .mobile_view_svg_div{} 
                  `@media(max-width:600px){`
                    `.mobile_view_svg_div`
                    `{`
                        width:300px;
                    `}`
                   `} `
          </style>
          <div>
          <svg className="mobile_view_svg_div">
            svg code here.
          <svg>
          </div>
)

当我编译它时，我得到错误

语法错误：意外的令牌，预期}

任何帮助都会很棒。

Answer 1

您忘记在其上添加包装div。有了这个，这样的样式应该工作。

我刚刚添加了红色背景，因此您可以实际看到样式的实际效果;）

＆＃13;

class App extends React.Component {
  render() {
    return (
      <div>
        <style>{`
          .mobile_view_svg_div {
            background-color: red;
          } 
          
          @media(max-width:600px) {
            .mobile_view_svg_div {
              width:300px;
            }
          }
        `}</style>
        <div>
          <svg className="mobile_view_svg_div">
            svg code here.
          </svg>
        </div>
      </div>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
)

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

＆＃13;

Answer 2

你需要在div中包装返回，对我来说很好。

Answer 3

这是不可能的，JSX只支持HTML标签，为了加载/管理css你要么将它加载到文档正文中（manualy或dinamic加载）或使用特定的组件，如样式组件和管理它直接在js文件中。

样式标签返回（）

3 个答案: