Как я могу вставить элемент <carousel> в response.js

Я пишу веб-сайт, основанный на response.js. Я хочу, чтобы фоновое изображение скользило автоматически на моей индексной странице, и я импортирую элемент {carousel} из Ant Design, который имеет реализацию использования carousel. У меня есть код, который будет маршрутизироваться на каждый компонент. Теперь мне интересно, как я могу вставить {carousel} в индексную страницу. У меня есть следующий код:Как я могу вставить элемент <carousel> в response.js

/* 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'));

Честно говоря, я понятия не имею, почему я сделал это, я просто догадываюсь. Или мне нужно создать еще один компонент для хранения информации о каруселях? Или есть другой простой способ понять это. Спасибо огромное!

источник

2016-11-17 Xiufen Xu

Я бы предположил, что вы поместили его в компонент MainLayout, как раз там, где у вас его есть (без разметки, конечно) –

@SamiKuhmonen Спасибо за ваше предложение, но оно все равно не работает. –

@ XiufenXu вы видели мой ответ? это вам помогло? – Sergio

React Router будет вызывать различные компоненты в зависимости от пути. Итак, в вашем примере <Route path="/myitinerary" component={MyRoot}/> необходимо определить какой-то компонент MyRoot.

И, похоже, его приход отсюда: импорт MyRoot из «./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;

И что бы пройти Carousell внутри компонент. пример просто Caroussel бы:

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>

источник

2016-12-26 09:41:41 Sergio

использовать импорт {} Carousel от 'antd'; наверху Компонент

источник

2017-06-12 10:11:25

Как я могу вставить элемент <carousel> в response.js

ответ

Смежные вопросы