将状态传递给React/Redux中的递归嵌套组件 [英] Pass state to recursively nested component in React/Redux

问题描述

我有一个组件，该组件具有与组件本身相同类型的子代.我也可以渲染孩子，但是孩子似乎无法访问他们的状态.我在Redux上使用React

I have a component that has children of the same type as the component itself. I can render the children as well but the children can't seem to access their slice of state. I'm using React with 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)

此外，我正在使用Material-ui中的 ListItem (它们最终呈现在List组件中)，并且官方redux仓库中的树状视图示例.我的状态如下:

Also, I'm making use of ListItem from Material-ui (these are ultimately rendered inside a List component) and my code is heavily influenced from the tree-view example in the official redux repo. My state looks like this:

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

}

所示状态与树状图示例中的结构相同

The state shown has the same structure as in the tree-view example

推荐答案

好吧，如果我理解正确的话，您希望这些Material组件从redux存储中获取数据.
如果这是您想要实现的目标，则需要为Material的每一个提供对redux存储的访问.基本上，您需要使用connect HOC将它们包装起来.
示例:

Well, if I understand it right, you want these Material components to get it's data from the redux store.
If that's what you want to achieve you need to provide access to the redux's store to each one of the Material. Basically you need to wrap all of them with the connect HOC.
Example:

const MaterialContainer = connect(mapStateToProps)(Material);

在renderChild函数中，您将使用此MaterialContainer.

And inside the renderChild function you would use this MaterialContainer.

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

您可以看到它在这里工作 https://jsbin.com/taquke/edit?js,output

You can see it working here https://jsbin.com/taquke/edit?js,output

这篇关于将状态传递给React/Redux中的递归嵌套组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！