React/Reduxの再帰的にネストされたコンポーネントに状態を渡す

Question

コンポーネント自体と同じタイプの子を持つコンポーネントがあります。私は子供たちもレンダリングすることができますが、子どもたちは状態のスライスにアクセスできないようです。私はまた、私はListItem from Material-uiを利用しています（これらは最終的にListコンポーネント内にレンダリングされている）と私のコードが重く公式Reduxのレポでtree-view exampleから影響を受けているReduxの

export class Material extends React.Component { 

    constructor(props) { 
    super(props) 
    this.renderChild = this.renderChild.bind(this) 
    this.getNestedItems = this.getNestedItems.bind(this) 
    } 

    static propTypes = { 
    parentId: PropTypes.number, 
    id: PropTypes.number.isRequired, 
    name: PropTypes.string.isRequired, 
    subtext: PropTypes.string.isRequired, 
    childIds: PropTypes.arrayOf(PropTypes.number.isRequired), 
    fileType: PropTypes.string.isRequired 
    } 

    // This is where I am having trouble. 
    // Shouldn't the props be accessible from state itself? 

    renderChild = (id, childId) => (
     <Material key={childId} 
     id={childId} 
     parentId={id} 
     name={name} 
     subtext={subtext} 
     fileType={fileType} 
     /> 
    ) 

    getNestedItems = (id, childIds) => { 
    console.log("id: " + id) 
    console.log("childIds: " + childIds) 
    var childItems = [] 
    for(var i=0; i < childIds.length; i++){ 
     var child = this.renderChild(id, childIds[i]) 
     childItems.push(child) 
    } 
    return childItems 
    } 

    render(){ 

    let childItems = [] 
    if(this.props.childIds){ 
     childItems = this.getNestedItems(this.props.id, this.props.childIds) 
    } 

    return(
     <ListItem 
     leftAvatar={<Avatar icon={fileType.length === 0 ? <FileFolder /> : <ActionAssignment />} />} 
     rightIcon={fileType.length === 0 ? <AddCircle /> : <ActionInfo />} 
     primaryText={name} 
     secondaryText={subtext} 
     initiallyOpen={fileType.length === 0} // fileType is empty if it is a folder 
     primaryTogglesNestedList={fileType.length === 0} 
     nestedItems={childItems} // one has to pass an array of elements 
     /> 
    ) 
    } 
} 

const mapStateToProps = (state, ownProps) => { 
    return { 
    id: ownProps.id, 
    name: state.Material[ownProps.id].name, 
    subtext: state.Material[ownProps.id].subtext, 
    childIds: state.Material[ownProps.id].childIds, 
    fileType: state.Material[ownProps.id].fileType, 
    } 
} 

export default connect(
    mapStateToProps 
)(Material) 

と反応して使用しています。

const initialState = { 
    0: { 
     id: 0, 
     name: 'Root', 
     subtext: 'Some subtext', 
     fileType: '', 
     childIds: [1] 
    }, 
    1: { 
     id: 1, 
     name: 'Child', 
     subtext: 'Child subtext', 
     fileType: 'png', 
     childIds: [] 
    } 

} 

状態が示され、私は右のそれを理解すれば、あなたはこれらのMaterialのコンポーネントからそれのデータを取得したい、ツリービューの例では

Answer 1

だけでなく、同じ構造を持っている：私の状態は、このようになります還元店。
達成したい場合は、Materialのそれぞれにレヴィクスの店舗へのアクセスを提供する必要があります。基本的には、それらのすべてをconnect HOCでラップする必要があります。
例：

const MaterialContainer = connect(mapStateToProps)(Material); 

そして、あなたはこのMaterialContainerを使用しますrenderChild関数の内部。

renderChild = (id) => (
    <MaterialContainer key={childId} id={childId} /> 
) 

あなたはそれがここに https://jsbin.com/taquke/edit?js,output