Question

作为一个例子，假设我们有一个链接标记，我们希望使用印刷术和链接类对其进行样式设置。

没有ReactJS样式可以通过这种方式完成。

<a class="link typography2">Link</a>

现在将其转换为React就是发生麻烦的地方。 React使HTML成为一种编程语言。
最简单的方法就是使用类。

// Link.js
const Link = props => <a class="link typography2">Link</a>

// folder structure
Link
|-- Link.js
CSS
|-- link.css
|-- typography.css

但是在这种方法中，css与JS是分开的，为什么link.css与Link.js是分开的？这是推荐的方法吗？ create-react-app不推荐这种方式。同样在这里，复制后我在Link.js上留下了毫无意义的类，这与函数式编程背道而驰。

第二种方法将被拆分。

// folder structure
Link
|-- Link.js
|-- link.css
CSS
|-- typography.css

// start of Link.js
import "link.css"
import "../CSS/typography.css"

但是现在CSS有时与JS分组在一起，有时却没有，您不知道CSS在哪里。您不知道哪个文件夹取决于外部CSS文件夹，因此在复制时必须手动检查所有内容或遇到错误。

第三种方法是制作所有React组件。

// folder structure
Link
|-- Link.js
|-- Link.css
Typography
|-- Typography.js
|-- Typography.css

// link component usage
const Usage = props => {
    return (
        <Typography component="div" className="typography1">
            <Link href="#">Link</Link>
        </Typography>
    );
}

但是在此示例中，我剩下许多包装的html元素，因为这将返回此html。

<div class="typography1">
    <a class="link" href="#">Link</a>
</div>

现在，另一种选择是忽略诸如链接之类的简单组件而不是使它们变得简单，但是现在您打破了DRY原则，因为在className上进行更改时，您必须在多个位置进行更改。

关于您如何做的任何建议？我在任何地方都找不到样式。

请帮助！

如何针对文件夹/文件结构设置ReactJ样式？

0 个答案: