Reactjs 使用react路由器dom和redux时从组件访问道具

我制作了这个示例应用程序来学习如何将react router dom和redux结合使用，一切正常，除了，我不知道如何访问组件内的道具

所有代码都在这里

条目文件index.js

import { render } from 'react-dom'
import React from 'react'
import { Provider } from 'react-redux'
import { ConnectedRouter } from 'react-router-redux'

import App from './app'
import { store, history } from './store'

render(
    <Provider store={ store }>
        <App />
    </Provider>, document.getElementById('app'))

main.js

import React from 'react'
import {
    BrowserRouter as Router,
    Route,
    Link
} from 'react-router-dom'

import {
    combineReducers,
    createStore,
    compose,
    applyMiddleware
} from 'redux'
import {
    ConnectedRouter,
    routerReducer,
    routerMiddleware
} from 'react-router-redux'

import {
    history,
    store
} from './store'

const Home = ({ match }) => (
    <div>Home</div>
)

const Tacos = ({ match }) => (
    <div>
        Tacos to order: 
        <Link to={`${match.url}/plain`}>Plain</Link>
        <Link to={`${match.url}/cheese`}>Cheese</Link>
        <Link to={`${match.url}/chipotle`}>Chipotle</Link>
        <div>
            <Route path={`${match.url}/:kind`} component={ Taco } />
        </div>
    </div>
)

const Taco = ({ match }) => (
    <div>You ordered {match.params.kind}</div>
)

const Main = (props) => (
    <ConnectedRouter history={ history }>
        <div>
            <Link to="/">Home</Link>
            |
            <Link to="/tacos">Tacos</Link>
            <div>
                <Route path="/" component={ Home } {...props}/>
                <Route path="/tacos" component={ Tacos } {...props}/>
            </div>
        </div>
    </ConnectedRouter>
)


export default Main

我认为这些是安装过程中最重要的文件。我的问题是，如何从Taco组件内部访问操作中的props.newProject（）函数？使用React developer工具，我可以看到我的路由器可以访问props.newProject（），但它在Taco级别不存在

我应该使用{…props}将道具传递给Taco组件还是有更聪明的方法

---

一种方法是将您的组件（如

Taco

）分别连接到redux商店（使用

connect

），然后使用

MapStateTrops

和

mapDispatchToProps

仅公开相关状态和相关功能（就像一个调用

分派（someNewAction（））

到组件的函数

因此，您将拥有一个

组件（连接到redux存储），这将是您在路由中指定的组件

---

这样，组件本身就知道它应该如何与商店交互。然后，作为一个独立的东西使用组件就变得更容易了，因为它已经知道了所有（或大部分）棘手的细节，所以不需要每次使用它时都向它传递大量的道具和分派方法。（如果需要，您仍然可以从外部向其传递额外的道具。）

一种方法是将您的组件（如

Taco

）分别连接到redux商店（使用

connect

），然后使用

MapStateTrops

和

mapDispatchToProps

仅向组件公开相关状态和相关函数（如调用

dispatch（someNewAction（））

）

因此，您将拥有一个

组件（连接到redux存储），这将是您在路由中指定的组件

---

这样，组件本身就知道它应该如何与商店交互。然后，作为一个独立的东西使用组件就变得更容易了，因为它已经知道了所有（或大部分）棘手的细节，所以不需要每次使用它时都向它传递大量的道具和分派方法。（如果需要，你仍然可以从外部传递额外的道具。）

如果您想在组件中使用动作，这基本上就是

connect

的用途。您已经在

App

中使用动作了，如果您希望也使用该组件中的动作，您需要对

Taco

组件执行同样的操作。@MarioF这看起来怎么样？a connect（）（Taco）对于我想访问的每个组件，我的意思是，您可以连接组件并从状态获取所需的属性，或者连接父组件并将信息作为属性传递给子组件。如果您想在组件中使用操作，这基本上就是

connect

是为。您已经在为

App

执行此操作，如果您希望同时使用该组件的操作，则需要对

Taco

组件执行相同的操作。@MarioF这看起来如何？A connect（）（Taco）对于我想访问的每个组件，我的意思是，你可以连接组件并从状态获取你想要的属性，或者连接父组件并将信息作为propslook传递给子组件，就像使用react router dom和reduxLooks一样这是使用react路由器dom和redux时要采取的方法

import React from 'react'
import {
    BrowserRouter as Router,
    Route,
    Link
} from 'react-router-dom'

import {
    combineReducers,
    createStore,
    compose,
    applyMiddleware
} from 'redux'
import {
    ConnectedRouter,
    routerReducer,
    routerMiddleware
} from 'react-router-redux'

import {
    history,
    store
} from './store'

const Home = ({ match }) => (
    <div>Home</div>
)

const Tacos = ({ match }) => (
    <div>
        Tacos to order: 
        <Link to={`${match.url}/plain`}>Plain</Link>
        <Link to={`${match.url}/cheese`}>Cheese</Link>
        <Link to={`${match.url}/chipotle`}>Chipotle</Link>
        <div>
            <Route path={`${match.url}/:kind`} component={ Taco } />
        </div>
    </div>
)

const Taco = ({ match }) => (
    <div>You ordered {match.params.kind}</div>
)

const Main = (props) => (
    <ConnectedRouter history={ history }>
        <div>
            <Link to="/">Home</Link>
            |
            <Link to="/tacos">Tacos</Link>
            <div>
                <Route path="/" component={ Home } {...props}/>
                <Route path="/tacos" component={ Tacos } {...props}/>
            </div>
        </div>
    </ConnectedRouter>
)


export default Main

import createHistory from 'history/createHashHistory'
import {
    createStore,
    compose,
    applyMiddleware
} from 'redux'
import {
    routerMiddleware
} from 'react-router-redux'

import rootReducer from './reducers/index'
import { project } from './data'

const initialState = {
    project
}

export const history = createHistory()

export const store = createStore(rootReducer,
    initialState, compose(
    applyMiddleware(routerMiddleware(history))
))