Question

我是redux-react的新手，请原谅我，如果这是一个愚蠢的问题。我有一个页面，显示表格中的一些产品列表。当我点击某个产品时，我想在覆盖主页面的面板中显示该产品的详细信息。

问题是详细信息页面已经有一个组件和容器类。如果我想渲染组件，我必须将主页面和详细信息页面容器混合在一起，这是我不想要的。我想保持每个页面组件和容器分开。

当我渲染容器时，我收到错误

不变违规：无法找到＆＃34;存储＆＃34;在上下文或道具中。将根组件包装在a中，或者显式传递＆＃34;存储＆＃34;作为道具。

我不知道如何通过它而且我用Google搜索了我无法为我的案例找到解决方案。我不想初始化新店。

这是我的点击功能，用于显示详细信息页面。

onClick(){
    ReactDOM.render(
        <div>
            <div className="my-panel" id="my-panel" data-toggler=".is-active">
                <ProductDetailContainer />
                <button className="button" data-toggle="my-panel">Close</button>
           </div>
        </div>,
        wrapper
    );
}

这是我的产品详细信息容器代码：

export class ProductDetailContainer extends RootContainer {
constructor(props) {
    super(props);
    this.state = {
        productDetail: {}
    };
}

componentDidMount() {
    this.props.dispatch(someAction);
}

componentWillReceiveProps(nextProps) {
    //some code here
}

handleRefresh() {
   //some code here
}

render() {
  return (
        <div className="row small-12 columns">
            <ProductDetailComponent                    
                data={this.state.productDetail}              
            />
        </div>
    );
}
}

ProductDetailContainer.propTypes = {
    productDetail: PropTypes.object
};


export function mapStateToProps(state) {
    return {
        productDetail: state.productdetail
    };
}

export default connect(mapStateToProps)(ProductDetailContainer);

如何在react-redux中动态呈现容器？

0 个答案: