Question

我从反应开始，在许多项目中我注意到以下编码样式：

方法1：

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>

方法2：

现在，如果我只是使用：

<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。

您甚至可以同时使用这两种情况。

人们已经撰写了有关这些文章。阅读这些以获取更多信息和说明。

希望这会有所帮助！

Answer 3

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

尤其出于两个原因：

Clean Code
Component segregation，最终促进了Code Reusability和DRY原则。

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

方法1：

方法2：

3 个答案: