Question

我在项目中使用样式化的组件。

考虑以下代码

import { Footer, FooterLeft, FooterRight, NavLink } from './footer_styles';

const FooterView = ({ prop }) => (
  <Footer className="row">
    <FooterLeft>
      &copy;Sample company, LLC
    </FooterLeft>

    <FooterRight>
      <NavLink to="#" className="footer-link">Privacy Policy</NavLink>
      <span className="separator"> | </span>
      <NavLink to="#">Terms &amp; Conditions</NavLink>
    </FooterRight>
  </Footer>
);

所以我有以下问题。

1）我可以在代码所示的样式化组件中使用引导程序类吗？这是正确的方法吗？如果没有，如何将引导样式与样式化组件一起使用？

2）我需要为dom中的每个元素创建一个组件吗？例如，在显示的代码中，有一个类名为“ separator”的span标记，其样式如下添加

export const FooterRight = styled.div`
  .separator {
    float: left;
  }
  .footer-link {
    margin-left: 0px;
  }

`;

这种方法正确吗？或

我需要为分隔符创建一个单独的组件吗？

我在这里有点困惑。任何帮助将不胜感激。

Answer 1

您可以使用bootstrap类来为组件设置样式，这没错。但是如果使用React Bootstrap更好，库会针对React进行优化。例如，您可以使用bootstrap类的下拉按钮，因为它将使用Jquery执行动画。但是您不应该这样做，因为Jquery操纵真实的DOM，React操纵虚拟的DOM，因此它对性能不利。

您可以在此处了解更多信息：https://reactjs.org/docs/integrating-with-other-libraries.html

答案仍然是，对于使用类来对组件进行样式设置的类，应该使用它来减少编码时间，对于与Jquery相关的任何事情，只需使用React组件即可。我建议您使用Reactstrap，与Bootstrap非常相似：https://reactstrap.github.io

另一件事，有很多样式组件的方法，但是我正在使用CSS模块，只需要创建一个CSS文件，其文件名如下所示：

styleComponent.css --> styleComponent.module.css

然后导入到您的项目：

import styles from './styleComponent.module.css'

然后您可以使用普通的CSS来设置组件样式：

<div className={styles.separator} >  Hello World </div>

在styleComponent.module.css中：

.separator{
height: 20px;
background: black;
}
.separator:hover{
background: white;
}

管理项目更容易，因为它的每个组件都有一个CSS文件，并且className在本地是唯一的，Webpack会自动将className的“ separator”转换为“ 2djfas_separator”，这将解决您的问题在CSS中使用命名类。

希望它对您的项目有帮助！

样式化的组件-正确的处理方式

1 个答案: