1

私はreact.jsに基づいたウェブサイトを書いています。インデックス ページに背景画像のスライドを自動的に表示したいので、要素 {carousel} をAnt Designからインポートします。この要素には、 how to use の実装があります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'));

正直なところ、なぜこのようなことをしたのかわかりません。ただの推測です。または、カルーセル情報を保持するために別のコンポーネントを作成する必要がありますか? または、これを行うための他のわかりやすい方法はありますか。どうもありがとう！

4

2 に答える 2

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>

于 2016-12-26T09:41:41.033 に答える