我有一个模态的容器组件 . 它导入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.showModal的值来阻止modal的内容出现在DOM中 . 但是，根据Chrome的React Developer Tools扩展，LabelDetailForm组件始终存在 . 为了节省内存，我希望容器组件只在showModal为true时导出LabelDetailForm .
我试着用branch（）：
export default compose(
connect(mapStateToProps, mapDispatchToProps),
branch(
({ showModal }) => showModal,
LabelDetailForm,
null
)
)
但是，即使showModal为true，LabelDetailForm也不会出现，我在控制台中收到以下警告：
Warning: Functions are not valid as a React child.
1 回答
branch()的第二个和第三个参数是高阶组件，而不是组件或null. 您可以使用renderComponent()和renderNothing()来创建HOC：