时间戳

首页 > 解决方案 > 从两个父容器访问数据 - ReactJS

javascript - 从两个父容器访问数据 - ReactJS

问题描述

我有一个组件可以呈现不同类型的字段，称为Item. Item可能会呈现带有列表Users或列表的选择框Inventory。我有两个容器：一个用于Users，另一个用于Inventory. 我最初想嵌套我的容器，但这似乎冻结了我的反应应用程序。Inventories和Users容器是相同的，只是一个容器存放库存物品，另一个存放用户。

这是Users容器：

import React, { Component } from 'react';


 class UsersContainer extends Component{

   constructor(props){
     super(props);
     this.state = {
       users: []
     }

   }

   componentDidMount(){
     //put api call here
     this.setState({users: [{id: 1, name: "Test Name", email: "test@yahoo.com"}, {id: 2, name: "John Doe", email: "johndoe@gmail.com"}, {id: 3, name: "Jane Doe", email: "janedoe@yahoo.com"}]})
   }


   render(){
     return(
       <div className="users-container">

          {React.Children.map(this.props.children, child => (
               React.cloneElement(child, {...this.props, users: this.state.users })
           ))}

       </div>
     )
   }

 }
export default UsersContainer;

我最初试图嵌套容器，但这会导致 React 冻结：

<UsersContainer>
    <InventoriesContainer>
        {this.props.items.map(i => (
            <Item name={i.name} />
        ))}
    </InventoriesContainer>
</UsersContainer>

项目看起来像这样：

function elementUsesInvetory(inventories){
    //returns selectbox with list of inventory
}

function elementUsesUsers(users){
    //returns selectbox with list of users
}


function Item(props){
    render(){

        return(
            <>
               {elementUsesUsers(props.inventories)}
               {elementUsesInventory(props.users)}
            </>
        );
    }
}

如何从组件提供数据UsersContainer以及InventoriesContainer向Item组件提供数据？

标签： javascriptreactjs

解决方案

我的好方法是将这些组件之间的状态共同放在level up树组件中的 a 中。

那么你想做什么：

<UsersContainer>
   <InventoriesContainer>
       {this.props.items.map(i => (
            <Item name={i.name} />
        ))}
    </InventoriesContainer>
</UsersContainer>

将会：

RealFatherComponent extends Component {

// state that Item will need will be set here
  render() {
    return (
      < UsersContainer **propsShared**  >
        <Item **propsShared** /> 
      </UsersContainer>
      < InventoriesContainer **propsShared** >
        <Item **propsShared** /> );
      </InventoriesContainer>
  }
}

推荐阅读