Javascript 在React容器组件中使用重新组合分支

我有一个用于模态的容器组件。它导入LabelDetailForm，即使用React门户将模式的内容添加到页面中

import {compose, branch} from 'recompose'
import {actionCreators as uiActionCreators} from '../../redux/reducers/ui/uiActions'
import {connect} from 'react-redux'
import LabelDetailForm from '../../forms/labelDetail/labelDetailForm'

export function mapStateToProps (state, props) {
    return {
        showModal: state.ui.showLabelDetailModal
    }
}

export const mapDispatchToProps = (dispatch, ownProps) => {
    return {
        closeModal: () => {
            dispatch(uiActionCreators.toggleLabelDetailModal())
        }
    }
}

export default compose(
    connect(mapStateToProps, mapDispatchToProps)
)(LabelDetailForm)

LabelDetailForm可以通过在其render方法中检查props.showmodel的值来防止模态的内容出现在DOM中。然而，根据针对Chrome的React Developer Tools扩展，LabelDetailForm组件始终存在。为了节省内存，我希望容器组件仅在showModal为true时导出LabelDetailForm

我尝试使用branch（）：

但是，即使showModal为true，LabelDetailForm也不会出现，我在控制台中收到以下警告：

Warning: Functions are not valid as a React child.

---

branch（）

的第二个和第三个参数是高阶组件，而不是组件或

null

。您可以使用和创建HOC：

branch(
  ({ showModal }) => showModal,
  renderComponent(LabelDetailForm),
  renderNothing
)

branch(
  ({ showModal }) => showModal,
  renderComponent(LabelDetailForm),
  renderNothing
)