Yinelemeli olarak iç içe geçmiş bileşene Reaktive/Yinele

Question

için durumu iletme Bileşenin kendisiyle aynı türde alt öğeleri olan bir bileşenim var. Çocukları da işleyebilirim ama çocuklar kendi dilimlerine erişemezler. Ben

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) 

Redux

ile tepki kullanıyorum Ayrıca, ben ListItem from Material-ui kullanımını (bunlar sonuçta Liste bileşenlerin içinde oluşturulur) ve benim kod ağır resmi redux repo tree-view example den etkilenir yapıyorum. Benim devlet şöyle görünür:

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

} 

gösterilen devlet Birazdan anlamak, eğer bu Material bileşenler bu veri var almak isteyen ağaç görünümü örnek

Answer 1

Eh aynı yapıya sahiptir redux mağazası.
Eğer başarmak istediğiniz buysa, redux mağazasına Material'un her birine erişim sağlamanız gerekir. Temel olarak hepsini connect HOC ile sarmanız gerekir.
Örnek:

const MaterialContainer = connect(mapStateToProps)(Material); 

Ve bu MaterialContainer kullanırsınız renderChild işlevi içinde

.

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

Sen burada https://jsbin.com/taquke/edit?js,output