我看 react的 组件是有 containers 与 components 组成, containers 主要是传递state 和 调用store 用, components 主要是起到显示作用, 现在的问题是我的组件containers 如果直接引入 containers的话 是无法触发服务端render 这个containers的, 我用的 redux-async-connect 来进行server端接口数据渲染
现在 containers只有在 route的情况下 才能正常的渲染出来,不知道有什么办法能解决我的这种想法
下面是我的一些重要部分的代码
Route.js
import { Route , IndexRoute } from "react-router";
import React from "react";
import CoreLayout from "./layouts/CoreLayout";
import App from "./apps/App";
import Slider from "./containers/Slider";
export default (
<Route name="app" path="/" component={CoreLayout}>
<IndexRoute component={App}/>
<Route path="slider" component={Slider}/>
</Route>
);
App.js
import React ,{Component} from 'react'
import Header from '../../components/ComponentHeader'
import MainInfo from '../../components/ComponentMainInfo'
import Features from '../../components/ComponentFeatures'
import Footer from '../../components/ComponentFooter'
class App extends Component {
render(){
return (
<div>
<Header/>
<MainInfo/>
<Features/>
<Footer />
</div>
)
}
}
export default App
ComponentMainInfo.js
import React , {Component} from 'react'
import ContainerSlider from '../../containers/Slider'
require('./index.styl');
export default class MainInfo extends Component {
render(){
return (
<div className="mainInfo">
<ContainerSlider/>
</div>
)
}
}
Slider.js
import React, {Component, PropTypes} from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux'
import {isLoaded,load} from '../actions/slider'
import ComponentSlider from '../components/ComponentSlider'
import { asyncConnect } from 'redux-async-connect';
@asyncConnect({
slider: (params, helpers) => {
const {dispatch, getState} = helpers.store;
return dispatch(load());
}
})
@connect(
state => ({slider:state.slider}),
dispatch => bindActionCreators({load},dispatch)
)
export default class ContainerSlider extends Component {
render(){
const {load} = this.props;
return (
<div>
<ComponentSlider/>
<p onClick={load}>load</p>
</div>
)
}
}
ComponentSlider.js
import React , {Component} from 'react'
import ReactDOM from 'react-dom'
import { connect } from 'react-redux'
@connect(
state => ({slider:state.slider})
)
export default class Slider extends Component {
render(){
return (
<div className="slider nivoSlider">
{this.props.slider.data.results.map(item =>
<img src={item.url} key={item.url} />
)}
</div>
)
}
}
我单独访问/slider 是可以渲染出来 ,但是在/ 下访问 slider 组件是无法渲染出来,这就是我的问题,谢谢帮忙解答~~