在 React 网站中使用类和样式的最佳方式

Question

我是从 react 开始的，我注意到很多项目中有以下编码风格：

方法一：

const Date = styled.h3`
  margin: 0 1rem 0.5rem 1rem;
  color: gray;
`

const ReadingTime = styled.h4`
  margin: 0 1rem 1.5rem 1rem;
  color: gray;
`

const Excerpt = styled.p`
  margin: 0 1rem 1rem 1rem;
  line-height: 1.6;
`

<Post>
      <Link to={`/${slug}/`}>
        <Date>{publishDate}</Date>
        <ReadingTime>{timeToRead} min read</ReadingTime>
        <Excerpt
          dangerouslySetInnerHTML={{
            __html: body.childMarkdownRemark.excerpt,
          }}
        />
      </Link>
    </Post>

方法二：

现在如果我只使用：

<Post>
          <Link to={`/${slug}/`}>
            <div className={'date'}>{publishDate}</div>
            <div className={'time'}>{timeToRead} min read</div>
            <div className={'excerpt'}
              dangerouslySetInnerHTML={{
                __html: body.childMarkdownRemark.excerpt,
              }}
            />
          </Link>
        </Post>

并在一个 css 文件中设置所有样式。

在创建 React 网站时，哪种方法是最佳实践？为什么？

Answer 1

首先，只有在从 API 获取数据时使用动态内容时，才需要将 className 名称用方括号括起来。

您可以简单地执行以下操作：

<Link to={slug}>
 <div className="date">{publishDate</div> 
 <div className="time">{timeToRead} min read</div>
</Link>

第一种方法用于单独设置每个 React 组件的样式。 React Styled 组件 ;).

Answer 2

这不是最佳实践问题，而是个人偏好、团队决定或基于要求的问题。两者都在做同样的事情，即为元素设置样式，但方法完全不同。

如果您想要基于组件、封装在组件中（范围方面）、动态（依赖于 JavaScript 样式的组件），那么请使用样式化组件。另一方面，如果你想要一些传统的、易于管理的东西，请使用 scss/css。

您甚至可以同时使用这两种情况，这种情况经常发生。

人们写过关于这些的文章。阅读这些以获取更多信息和说明。

• https://medium.com/building-crowdriff/styled-components-to-use-or-not-to-use-a6bb4a7ffc21
• Styled-component vs SASS (SCSS) or LESS

希望这会有所帮助！

Answer 3

我宁愿自己采用最初的方法。

主要有两个原因：

1. Clean Code
2. Component segregation，最终促进Code Reusability和DRY的原则。