陣營路由器與終極版：通過只需要道具到孩子級別路線

我有一個連接到終極版商店的應用程序組件：陣營路由器與終極版：通過只需要道具到孩子級別路線

import React from 'react' 
import { connect } from 'react-redux' 

function App(props) { 
    return (
    <div> 
     {props.children} 
    </div> 
); 
} 

function mapStateToProps(state) { 
    return { 
    todos: state.something 
    } 
} 

export default connect(mapStateToProps)(App)

應用程序是在我的反應路由器層次等的根級組件接收所有子路由兒童：

export default(
    <Route component={App} path="/"> 
    <IndexRoute component={Home} /> 
    <Route component={PageNotFound} path="*" /> 
    </Route> 
);

我希望能夠通過，在對App通過mapStateToProps傳遞給子組件的道具。看起來可以接受的方式是使用cloneElement來將道具傳遞給兒童（How to pass props to {this.props.children}）。因此在上面的第一個片段的代碼：

<div> 
    {props.children} 
</div>

變爲：

<div> 
    {React.cloneElement(props.children, { ...props } 
</div>

我覺得這個比較難看，因爲這意味着我盲目地傳球從連接的應用程序組件的所有道具給我的孩子航線組件。

這真的是這樣做的接受方式嗎？

來源

2016-09-20 Mike Rifgin

我想知道如果也許這是一個使用的方法？ http://stackoverflow.com/questions/36730619/unable-to-pass-redux-store-beyond-react-router/39300618#39300618 –

如果你不希望所有的道具「盲目地」傳下來，你可以連接''你的'Home'或者其他組件，比如你使用'App'組件，並且每個組件都有一個不同的'mapStateToProps'函數。 –

@MarioTacke謝謝。說得通。 –

如果您知道在mapStateToProps中創建了哪些道具，則可以僅提取並傳遞更多道具。

此外，它可能會有所幫助，如果你返回一個道具與mapStateToProps所有必要的數據，讓我們將其命名爲componentState：

function mapStateToProps({todos, somethingElse}) { 
    return { 
    componentState: { todos, somethingElse } 
    } 
}

後來的後來，你可以只傳遞這個單一支柱下來

<div> 
    {React.cloneElement(props.children, { componentState: this.props.componentState } 
</div>

來源

2016-09-20 20:51:21

是的，這是一個很好的方法。結束時，每個路由組件都是一個具有mapStateToProps的連接容器。 –

陣營路由器與終極版：通過只需要道具到孩子級別路線

回答

相關問題