Javascriptマップで他のコンポーネントに小道具を渡す方法は？

Question

私はストレージコンポーネントの中に「this.propsを」合格しようとしています。このコード

import React from 'react'; 
import {connect} from 'react-redux'; 
import {bindActionCreators} from 'redux'; 
import 'materialize-css/sass/materialize.scss'; 
import 'font-awesome/scss/font-awesome.scss'; 
import Storage from './Storage.js' 
import {fetchStorage, loadAddStorageModal, selectStorage} from '../actions/StorageActions.js' 


class SideNavContainer extends React.Component { 
    componentWillMount() {   
     this.props.fetchStorage(); 
    } 
    render() { 
      console.log(this.props); 
     return (
      <ul id="slide-out" className="side-nav fixed">  
       { 
        var hold = this.props; 
        this.props.storages.fetchedStorages.map(function (storage, i) { 
         return <Storage key={i} >{storage.name}</Storage> 
        }) 
       } 
       <li> 
        <a className="waves-effect waves-light" onClick={() => this.props.loadAddStorageModal(true)}><i className="fa fa-plus" aria-hidden="true">Add</i></a> 
       </li> 
       <li className="hide-on-large-only"><a href="/Home/Index">Home</a></li> 
       <li className="hide-on-large-only"><a href="/Account/SignOut">Signout</a></li> 
      </ul> 
     ) 
    } 
} 

function mapStateToProps(state) { 
    return { 
     storages: state.storages 
    }; 
} 

function matchDispatchToProps(dispatch){ 
    return bindActionCreators({fetchStorage: fetchStorage, loadAddStorageModal: loadAddStorageModal, selectStorage: selectStorage }, dispatch); 
} 


export default connect(mapStateToProps, matchDispatchToProps)(SideNavContainer); 

を持っています。私はしようとしました

return <Storage {...this.props} key={i} >{storage.name}</Storage> 

しかし、私は範囲が変更されたので、もう動作しないと考えています。私はそれを "保留"と呼ばれる変数に入れようとしましたが、 "var"が予期しないトークンであるとアプリケーション全体がクラッシュします。

Answer 1

は、自動バインドthisにfat arrow style function expressionを使用します。

this.props.storages.fetchedStorages.map((storage, i) => { 
    return <Storage key={'storage-' + i} {...this.props}>{storage.name}</Storage>; 
});