render（）中的connect（）？

Question

我有一個動態的屬性列表，我試圖用來爲列表中的每個對象實例化一個React組件。

這裏是我的mapStateToProps()和mapDispatchToProps()的簡化版本：

export function mapStateToProps(id) { 
    return function(state) { 
    return state.widgets.find((widget) => id === widget.id); 
    }; 
} 

export function mapDispatchToProps(id) { 
    return function (dispatch) { 
    return { 
     fetchData: (path, props) => dispatch(fetchData(id, path, props)), 
    }; 
    }; 
}; 

然後在父組件：

render() { 

    const widgets = this.props.widgets.map((widget) => { 
    return connect(
     mapStateToProps(id), 
     mapDispatchToProps(id), 
    )(Widget); 
    }); 

    return <div>{ widgets }</div>; 
} 

它不拋出任何異常，但它不叫mapStateToProps()或mapDispatchToProps()。

我到目前爲止唯一的猜測是connect()需要早些時候調用，但我不知道如何使用動態列表道具做到這一點。任何人有任何想法如何使這項工作？

Answer 1

mapStateToProps和mapDispatchToProps都有第二個參數ownProps。您可以抓取這些函數中傳遞的道具，並導出連接的Widget，就像您使用其他任何容器一樣。

// WidgetContainer.js 

function mapStateToProps(state, ownProps) { 
    return state.widgets.find((widget) => ownProps.id === widget.id); 
} 

function mapDispatchToProps(dispatch, ownProps) { 
    return { 
    fetchData: (path, props) => dispatch(fetchData(ownProps.id, path, props)), 
    }; 
} 

export default connect(mapStateToProps, mapDispatchToProps)(Widget); 

然後在循環做@thedude是在暗示：

return <div>{this.props.widgets.map(w => <Widget id={w.id} />)}</div> 

文檔：https://github.com/reactjs/react-redux/blob/master/docs/api.md

Answer 2

，請不要使用連接渲染方法內。相反，使用道具將所需的任何東西發送給孩子們。

@connect(state => ({ 
    widgets: state.yourReducer.widgets 
}), { 
    fetchData: yourFetchActionCreator, // <-- bind your action creator here 
}) 
class ParentComponent extends PureComponent { 

    render() { 
    return (
     <div> 
     { 
     this.props.widgets.map(widget => 
      <Widget {...widget} fetchData={this.props.fetchData} />) 
     } 
     </div> 
    ); 
    } 
} 

裏面Widget你將有ID和一切的每個widget對象內。

祝你好運！