将状态传递给 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屋！