Question

我正在创建一个应用程序，其中我有一个显示基于路由器位置的数据的组件例如 localhost：8080 / us应该显示“美国国旗和一些与美国相关的文字” localhost：8080 / in应显示“印度国旗和一些与印度有关的文字”

我有两个减速器用于印度，另一个用于美国，我有一个减速器如下图所示

import  {combineReducers} from 'redux';

import IndiaData from './IndiaData';
import USData from './UsData';

const rootReducer = combineReducers({
    IndiaData,
    USData,
    ActiveData
});


export default rootReducer;

我的Sample reducer IndiaData如下：

export default function() {
    return [
         {
                "StateName": "AP",
                "StateImg": "../static/image1.jpg",
             },
            {
                 "StateName": "TS",
                "StateImg": "../static/image2.jpg",
            },
            {
                 "StateName": "TN",
                "StateImg": "../static/image3.jpg",
            }
        ]
}

我在反应组件中使用了mapStateToProps，请找到代码

import React, {Component} from 'react';
import {connect} from 'react-redux';

import styles from '../styles/custom.css'

class CountryData extends React.Component {
    Country(){
        
       return this.props.usdata.map((Data)=>{
            return(
                <div className="col-md-4">
                    <img className="panel" src={Data.StateImg}/>
                    <p>{Data.StateName}</p>
                </div>
            );

        }) 
    }
       
    render(){
        return(
            <div>
              <div className="container margin-top jumbotron">
                      {this.Country()}
              </div>
            </div>
        );
    }
}

function mapStateToProps (state){

    return {
        indiadata: state.IndiaData,
        usdata: state.USData,
    };
}
export default connect(mapStateToProps)(CountryData);

我的路由器配置如下

import React from 'react';
import {Route, IndexRoute} from 'react-router';

import App from './components/app';
import CountryData from './components/CountryData';


export default (
	<Route path ="/" component={App}>
		<Route path="in" component={CountryData} />
		<Route path="us" component={CountryData} />
	</Route>
);

所以最后我应该能够阅读网址路径中的内容，然后动态显示美国数据或印度数据，有人可以帮助我吗？

感谢您的支持！

Answer 1

你可以这样做一条路线：

然后通过country访问容器中的this.props.params.country个参数。

在mapStateToProps功能中，您可以使用此常量来呈现正确的国家/地区数据。

   return this.props.data.map((Data)=>{
        return(
            <div className="col-md-4">
                <img className="panel" src={Data.StateImg}/>
                <p>{Data.StateName}</p>
            </div>
        );

    }) 
...
// other code here
...
function mapStateToProps (state, props){
    return {
        data: props.params.country === 'in' 
            ? state.IndiaData
            : state.USData
    };
}

另一种方法是导出两个不同的连接组件。

  return this.props.data.map((Data)=>{
       return(
           <div className="col-md-4">
               <img className="panel" src={Data.StateImg}/>
               <p>{Data.StateName}</p>
           </div>
       );

}) 
    ...
    // other code here
    ...
    function IndiaData (state){
        return {
            data: state.IndiaData
        };
    }
    function USData (state){
        return {
            data: state.USData
        };
    }

export const India = connect(IndiaData)(CountryData);
export const US = connect(USData)(CountryData);

然后在你的路线中：

import React from 'react';
import {Route, IndexRoute} from 'react-router';

import App from './components/app';
import { India, US } from './components/CountryData';


export default (
    <Route path ="/" component={App}>
        <Route path="in" component={India} />
        <Route path="us" component={US} />
    </Route>
);

基于路由器改变应用状态

1 个答案: