将状态传递给 React/Redux 中的递归嵌套组件

Question

我有一个组件 children 与组件本身类型相同。我也可以渲染 children，但 children 似乎无法访问其状态片段。我正在使用 React 和 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)

此外，我正在使用官方 redux 存储库中的 ListItem from Material-ui (these are ultimately rendered inside a List component) and my code is heavily influenced from the tree-view example。我的状态是这样的：

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

}

显示的状态与 tree-view 示例中的结构相同

Answer 1

好吧，如果我没理解错的话，您希望这些 Material 组件从 redux 存储中获取数据。
如果那是你想要实现的目标，你需要为 Material 中的每个人提供对 redux 商店的访问。基本上你需要用 connect HOC 包装它们。
示例：

const MaterialContainer = connect(mapStateToProps)(Material);

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

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

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

将状态传递给 React/Redux 中的递归嵌套组件

Pass state to recursively nested component in React/Redux

reactjs

redux

material-ui

react-redux