Question

我正在尝试学习反应。到目前为止，我在Java脚本中看到了很多样式更改。据我所知，样式应该仅由css文件管理。但是我不确定这个规则是否也适用于React。什么是做出反应的最佳实践。例如，下面的代码是干净的代码，还是在React组件中更改样式是难闻的气味并需要重构？如果是这样，该如何重构？

“const Color = ({ title, color}) =>
    <section className="color">
        <h1>{title}</h1>
        <div className="color" 
             style={{ backgroundColor: color }}>
        </div>
    </section>”

Answer 1

这完全取决于我们的要求和偏好。内联样式仅涉及写入它们的组件。您可以根据组件构造CSS，从而使其可重用。您可以在变量以及单独的asssets目录中的组件中声明css。

更多的是关于代码的可读性和可重用性。 Webpack 将所有css / scss写入一个文件中，然后注入到index.html中。您应该研究JSS，以便可以编译CSS，然后将其作为道具注入到组件中。无论如何，您可以利用很多资源。

Answer 2

我更喜欢连接外部.css文件-它更干净。如果需要将样式保留在.js中，我将以这种方式组织代码：

const styles = {
color: 'red',
fontSize: '2rem',
backgroundColor: 'forestgreen'
}

我将像下面这样应用我需要的样式：

<div style={{color: styles.color, fontSize: styles.fontSize}}></div>

或者，如果我需要应用所有样式：

<div style={styles}></div>

Answer 3

您还可以使用样式化的组件https://www.styled-components.com/

如何在ReactJs中管理样式

3 个答案: