如何将 <carousel> 元素插入 react.js答案

【问题标题】：How can I insert the <carousel> element into react.js如何将 <carousel> 元素插入 react.js
【发布时间】：2017-03-31 14:38:56
【问题描述】：

我正在编写一个基于 react.js 的网站。我希望背景图像在我的索引页面中自动滑动，并从Ant Design 导入元素{carousel}，它实现了如何使用carousel。我有将路由到每个组件的代码。现在，我想知道如何将 {carousel} 插入索引页面。我有以下代码：

/* eslint no-unused-vars: "off" */

import React from 'react';
import { render } from 'react-dom';
import { Router, Route, browserHistory } from 'react-router'

import Root from './Root/Root'
import MainLayout from './MainLayout/MainLayout'
import MyRoot from './MyRoot/MyRoot'
import CreateNew from './CreateNew/CreateNew'
import './index.css'
import { Carousel } from 'antd';

// see https://github.com/ReactTraining/react-router
render((

  // <Carousel autoplay>
  //   <div><image>1</image></div>
  //   <div><image>2</image></div>
  //   <div><image>3</image></div>
  //   <div><image>4</image></div>
  // </Carousel>, mountNode;

  <Router history={browserHistory}>
    <Route component={MainLayout}>
      <Route path="/" component={Root}/>
      <Route path="/myitinerary" component={MyRoot}/>
      <Route path="/createnew" component={CreateNew}/>
    </Route>
  </Router>
), document.getElementById('root'));

老实说，我不知道我为什么这样做，我只是在猜测。还是我需要创建另一个组件来保存轮播信息？或者有没有其他容易理解的方法来做到这一点。非常感谢！

【问题讨论】：

我假设您将它放入 MainLayout 组件中，就像您在其中的方式一样（当然未注释）
@SamiKuhmonen 感谢您的建议，但无论如何它不起作用。
@XiufenXu 你看到我的回答了吗？对你有帮助吗？

标签： reactjs carousel antd

【解决方案1】：

React Router 会根据路径调用不同的组件。因此，在您的示例 <Route path="/myitinerary" component={MyRoot}/> 中，该组件 MyRoot 需要在某处定义。

看起来它来自这里：import MyRoot from './MyRoot/MyRoot'

因此，在该文件中，您可以拥有：

class MyRoot extends React.Component {
    render(){
       return (
          <Carousel autoplay>
            <div><h3>1</h3></div>
            <div><h3>2</h3></div>
            <div><h3>3</h3></div>
            <div><h3>4</h3></div>
          </Carousel>
        );
    }
}
export default MyRoot;

这将通过组件内部的轮播。旋转木马的一个例子是：

const { Carousel } = 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>
, document.getElementById('app'));

.ant-carousel .slick-slide {
  text-align: center;
  height: 160px;
  line-height: 160px;
  background: #364d79;
  color: #fff;
  overflow: hidden;
}

<link href="https://ant.design/index-1.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://npmcdn.com/antd/dist/antd.js"></script>
<div id="app"></div>

【讨论】：

【解决方案2】：

使用来自 'antd' 的导入 { Carousel }；在顶部组件上

【讨论】：