React ant-design走马图，CSSmoudles复用

最新推荐文章于 2024-06-24 17:23:49 发布

SherrybabyOne

最新推荐文章于 2024-06-24 17:23:49 发布

阅读量1.1k

点赞数 1

本文链接：https://blog.csdn.net/SherrybabyOne/article/details/83027477

版权

本文介绍了如何在React项目中结合ant-design的走马图组件和CSS Modules实现组件复用。通过定义CSS Modules格式解决变量名冲突问题，并通过数组遍历优化代码，动态添加图片和文字。同时，文章讲解了如何从后端获取数据，利用fetch函数在组件的生命周期方法中获取接口数据，并将其存储在state中以便在render函数中使用。

摘要由CSDN通过智能技术生成

ant-design走马图，CSSmoudles复用，跟后端请求

因为写一个项目需要ant-design的轮播图，项目使用的是css-moudles

ant-design复用css-moudles

import { Carousel } from 'antd';

ReactDOM.render(
  <Carousel autoplay>
    <div><h3>1</h3></div>
    <div><h3>2</h3></div>
    <div><h3>3</h3></div>
    <div><h3>4</h3></div>
  </Carousel>,
  mountNode);
/* For demo */
.ant-carousel .slick-slide {
  text-align: center;
  height: 160px;
  line-height: 160px;
  background: #364d79;
  overflow: hidden;
}

.ant-carousel .slick-slide h3 {
  color: #fff;
}

造成的一个问题就是ant-carousel、slick-slide、ant-carousel、slick-slide这些变量名无法被引入，我的解决方法是

ReactDOM.render(
  <Carousel autoplay>
    <div className={styles.wrapper}><img src='./1.png' /></div>
    <div className={styles.wrapper}><img src='./2.png' /></div>
    <div className={styles.wrapper}><img src='./3.png' /></div>
    <div className={styles.wrapper}><img src='./4.png' /></div>
  </Carousel>,
  mountNode);

之后在引入的css的文件中定义格式，比