使用渲染逻辑反应容器？

Question

我有一个容器，它呈现3个组件： 1.物品清单 2.新项目模式 3.编辑项目模态

为了控制整个容器功能，我需要用列表调用项目列表。是否可以将所有内容都放在容器内？ 可以在容器中渲染模态吗？ （模态包含2和3个组件）

class Items extends React.Component {
    constructor(props) {
        super(props)

        this.state = {
            modal: false
        }

        this.columns = [
            ...
        ]

        this.closeModal = this.closeModal.bind(this)
    }

    openModal(type, item) {
        this.setState({
            modal: {
                type,
                item: item && item.toJS()
            }
        })
    }

    closeModal() {
        this.setState({modal: false})
    }

    renderModal() {
        const {item, type} = this.state.modal;

        return (
            <Modal onClose={this.closeModal}>
                {type == modalTypes.NEW_ITEM &&
                <ItemForm onCancel={this.closeModal}
                              onSubmit={...}/>}
                {type == modalTypes.REMOVE_ITEM &&
                <ConfirmationDialog text="Are you sure you want to remove?"
                                    onSubmit={...} onCancel={this.closeModal}/>}
                {type == modalTypes.EDIT_ITEM &&
                <ItemForm onCancel={this.closeModal}
                              onSubmit={...}/>}
            </Modal>
        )
    }

    render() {
        const {visibleItems, display_type} = this.props;
        return (
            <div>
                <div className="_header_container">
                    <Header title="Items"/>
                    <div className="actions">
                        <Search />
                        <DisplayToggle />
                        <Button size="sm" color="primary"
                                onClick={() => ...}
                    </div>
                </div>
                {display_type == displayType.GRID &&
                <Grid items={visibleItems} columns={this.columns}/>}
                {display_type == displayType.TILE &&
                <TileView items={visibleItems} titleKey="name" linkKey="url"/>}
            </div>
        )
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        remove: (item) => dispatch(remove(item)),
        edit: (item, ...) => dispatch(edit(item, ...)),
        create: (name, val) => dispatch(create(name, url)),
    }
}
const mapStateToProps = (state) => {
    return {
        visibleItems: filterItems(state.items, state.search),
        display_type: state.display_type
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Items)

由于