React和Ant Design Carousel

Question

我正试着在我的react应用中使用antd Carousel。我已经查阅了大量的资源来获取关于如何使用带有图片的ant设计Carousel的想法，但是我没有找到任何例子来描述在使用antd carousel时不使用'style‘和其他东西。

我想在<Content><Content/>中使用<Carousel><Carousel/>作为我的App.js文件中的第一个，并想在App.css文件中为Carousel单独执行CSS。

有没有人对如何在我的一个页面站点中使用antd Carousel来显示一些吸引人的图片有什么一般性的建议？

我的代码：

import React from 'react';
import "../../src/App.css";
import 'bootstrap/dist/css/bootstrap.min.css';
import { TwitterOutlined, FacebookOutlined, YoutubeOutlined, PauseOutlined, SearchOutlined, LeftSquareOutlined, RightSquareOutlined } from '@ant-design/icons';
import { Navbar, Nav } from 'react-bootstrap';
import { Layout, Carousel, } from 'antd';

}
const { Header, Footer, Content } = Layout;
class App extends React.Component {
render() {
    return (
      <Layout>
        <Header>
        <Navbar expand="lg">
            <Navbar.Brand href="#home">
                <img src={require("../Assets/Images/hair_salon_logo1.png").default}/>
            </Navbar.Brand>
            <Navbar.Toggle aria-controls="basic-navbar-nav" />
            <Navbar.Collapse id="basic-navbar-nav">
              <Nav className="mr-auto">
                <Nav.Link href="#home">Home</Nav.Link>
                <Nav.Link href="#services">Services</Nav.Link>
                <Nav.Link href="#stylists">Stylists</Nav.Link>
                <Nav.Link href="#appointment">Appointment</Nav.Link>
                <Nav.Link href="#contact">Contact</Nav.Link>
              </Nav>
              <Nav className="ml-auto">
                <Nav.Link href="#twitter" id="twitter"><TwitterOutlined/></Nav.Link>
                <Nav.Link href="#facebook" id="facebook"><FacebookOutlined/></Nav.Link>
                <Nav.Link href="#youtube" id="youtube"><YoutubeOutlined/></Nav.Link>
                <Nav.Link href="#pause" id="pause"><PauseOutlined/></Nav.Link>
                <Nav.Link href="#search" id="search"><SearchOutlined/></Nav.Link>
              </Nav>
            </Navbar.Collapse>
          </Navbar>
        </Header>
        <Content>
          function onChange(a, b, c) {
            console.log(a, b, c);
          }

          const contentStyle = {
            height: '160px',
            color: '#fff',
            lineHeight: '160px',
            textAlign: 'center',
            background: '#364d79',
          };

          ReactDOM.render(
            <Carousel afterChange={onChange}>
              <div>
                <h3 style={contentStyle}><!--image-1--></h3>
              </div>
              <div>
                <h3 style={contentStyle}><!--image-2--></h3>
              </div>
              <div>
                <h3 style={contentStyle}><!--image-3--></h3>
              </div>
              <div>
                <h3 style={contentStyle}><!--image-4--></h3>
              </div>
            </Carousel>,
            mountNode,
          );
        </Content>
        <Footer>
        </Footer>
    </Layout>
    );
  }
}
export default App;

Answer 1

使用功能组件而不是类组件。

例如，创建一个数组"imgCarousel“。

您的图像是本地的，所以在“公共”中创建一个“图像”文件夹，并将它们粘贴到其中。您的数组将如下所示：

const imgCarousel = [
  {
    id: 1,
    uri: "images/image1.jpg"
  },
  {
    id: 2,
    uri: "images/image2.jpg"
  },
  {
    id: 3,
    uri: "images/image3.jpg"
  },
  {
    id: 4,
    uri: "images/image4.jpg"
  }
];

然后只需制作一张地图，并使用process.env.PUBLIC_URL指定图像链接：

{
  imgCarousel.map (img => (
   <div key={img.id} style={contentStyle}>
    <img src={process.env.PUBLIC_URL + img.uri} alt="" />     // here
   </div>
))} 

演示：stackblitz