如何在 React 文件中使用 <style> 应答器答案

【问题标题】：How to use the <style> balise in React file如何在 React 文件中使用 <style> 应答器
【发布时间】：2019-02-28 20:47:12
【问题描述】：

出于快速演示的目的，我需要从已经存在的页面中获取实际的<style> 应答器。

我知道这不是要做的事情，只是为了演示。

我有一个巨大的<style> 应答器来整数到反应应用程序中。我只想复制粘贴并尽可能少地进行更改。

我已经看到了：

<style>
    {'\
       div{\
          background-color:red;\
       }\
    '}
</style>

从这里：React JSX Style Tag Error on Render 正在工作，但这需要编辑我的应答器的所有行，而我没有有时间。

我也试过这个： https://medium.learnreact.com/the-style-tag-and-react-24d6dd3ca974

但不幸的是它不起作用：/

我正在寻找一个快速的解决方案，我只需要编辑我的<style> balise 的开头和结尾。

提前感谢社区

【问题讨论】：

标签： reactjs

【解决方案1】：

您可以使用模板文字。

const CSS = `
div {
  background: purple;
  color: orange;
}
`;

const app = (
  <div>
    <style>{CSS}</style>
    Hello, world!
  </div>
);

ReactDOM.render(app, document.body);

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

【讨论】：

啊，我无法理解这个问题。看到你的答案后才知道。 :)
另外，您可以参考模板文字（OP 可能不知道这一点）

【解决方案2】：

我了解您有一个带有样式的非反应项目，并且您正在使其反应，但您想保留 css。如果是这种情况，我建议如下：

1 - 获取原始标签，将其放置到 css 文件中，然后将其导入项目的基本 html 中，这样您仍然可以拥有样式而无需做任何反应

2 - 获取原始标签，将其放入 css 文件，然后使用 javascript/webpack 导入

import styles from './styles.css'

3 - 如果您仍想以类似的方式在 react 中放置样式标记，我建议您使用字符 ` 以以下方式定义 de 字符串 (ECMAScript 2015) （字符 ` 是与 ' 不同，它允许您在内部使用多个空格甚至变量。定义这样的字符串称为template literal)：

render(){
    let myCss = `
       div{
          background-color:red;
       }
    `;

    return (<style>
        {myCss}
    </style>)
}

4 - 使用“样式化组件”。它们旨在使在 react 中使用 css 变得更容易。尽管它们旨在为组件设置样式，但您也可以在其中一个组件内复制粘贴整个 CSS 样式。因此，只要您的所有反应元素都是您正在使用的特定样式组件的子元素，它就会使用这些样式。所以你可以完美地做到以下几点：

const styled = require('styled-components'); // or import styled from "styled-components";

let Wrapper = styled.div`
   div{
      background-color:red;
   }
`;

class MyReactProject extends React.Component {
    /** your react code **/

    render(){
        return (
            <Wrapper>
                { /* your react code */ }
            </Wrapper>
        )
    }
    /** your react code **/
}

使用 styled components 你暂时可以做一个快速的修复，并且将来可以很容易地做一个完整的 styled components 迁移（你只需要将你的 react 项目的每个 base 标签转换为 styled components）

link to styled components

【讨论】：