Question

我正在尝试将逻辑从类组件分离到容器组件，以便类组件仅负责呈现html。因此，我有两个组件，一个是 Home ，它是一个类组件，另一个是 Home容器，其中包含 Home 组件的代码，即mapStateToProps和mapDispatchToProps。

以下是文件： Home.js：

 render(){
        // Maps over 'items'
        let itemList = this.props.items.map((item) => {
            return (
                <div className="card" key={item.id}>
                    <img className="card-img-top" src={item.img} alt={item.title} />
                    <div className="card-body">
                        <span className="card-title">{item.title}</span>
                        <span to="/" onClick={() => {this.handleClick(item.id)}}><i className="material-icons">add</i></span>
                    </div>

                    <div className="card-content">
                        <p>Price: {item.price}</p>
                        {/* <p>{item.quantity}</p> */}
                    </div>

                </div>
            )
        })
        return(
            <div className="container">
                <h3 className="text-center">Our items</h3>
                <div className="box">
                    {itemList}
                </div>
            </div>
        )
    }

从容器组件获取道具，即

HomeContainer.js：

class HomeContainer extends React.Component {
    render(){
        return(
            <div>
                <Home items={this.props.items}/>
            </div>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        items: state.items
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        addToCart: (id) => {dispatch(addToCart(id))}
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(HomeContainer)

并且我正在将道具传递到 HomeContainer 中的 Home 。

当我尝试通过映射项目来访问 Home 组件中的那些道具时，我得到无法读取未定义的属性。我该如何解决这个问题。

如何将道具从容器组件传递到类组件

0 个答案: