如何通过更灵活地渲染其他转储组件，使React中的智能组件更加智能

Question

当前，在呈现转储组件时，容器方法存在一个问题。

假设我有一个ProductContainer，如下所示：

class ProductContainer extends React.Component {
constructor(props) {
super(props);
this.state = { products: [] };
}
getAll(){
// get all products from store
}
addNew(){
// store the product to the store
}
render() {
return (
<ListProductComponent products={this.state.products}>
<AddProductComponent/>
)
}
}

我可以使用redux来管理商店，但在这种情况下，我只想让它尽可能简单。

然后我又有两个转储组件，分别是ListProductComponent和AddProductComponent

const ListProductComponent = (props) => {
return (
<h2>Print out products from {props.products}</h2>
);
};
const AddProductComponent = (props) => {
return (
<h2>AddProductComponent</h2>
);
};

到目前为止，是如此智能和转储，但当涉及到智能渲染时，问题就在这里，例如，我如何使智能组件仅渲染ListProductComponent，或者仅单独渲染AddProductComponent。

目前，我在容器的呈现函数中显示了这两个组件，我实际上想保留容器来为Product实体执行CRUD操作，然后使用相同的组件来列出产品，或者在所有其他转储组件中添加新产品。

在目前的实现中，我无法实现这一点，我不得不在同一视图中列出和添加新产品。

有些人建议让ListProductContainer和addProductContainer分别处理crud操作，但这种方式不是太分离了吗？实际上，我想把crud保留在一个智能组件中。

我如何才能实现这一点，为非常智能的组件提供更灵活的渲染。

更新：也许我想在容器上呈现这样的smth，但我不确定这样的smh是否可行。

function renderComponent(Component) {
return <Component />;
}

然后在容器的render()内部调用这个renderComponent，但我如何将状态/存储或其他属性传递给转储组件？

考虑到我也可以做同样的事情：

<ListProductComponent products={products} fetchProducts={this.getAll}/>

能够传递状态并调用父/容器方法。

Answer 1

如果我理解正确，您想有条件地渲染组件吗？您需要在渲染方法中使用三元运算符才能做到这一点

例如：

class ProductContainer extends React.Component {
constructor(props) {
super(props);
this.state = { products: [] };
}
getAll(){
// get all products from store
}
addNew(){
// store the product to the store
}
render() {
return (
{
this.state.products.length ? 
<ListProductComponent products={this.state.products}>
:
<AddProductComponent/>
}
) 
}
}

添加产品后，您还需要使用this.setState({ products: [ // products object ] })，以便React重新渲染组件并显示正确的数据。

你可以在这里阅读更多关于