the*_*uls 5 reactjs recompose higher-order-components
我正在使用重组库和 HoC 为我的组件传递一堆 props。我想知道是否有办法compose在设置 HoC 之前检查 props。例如,假设我有这样的东西:
export default compose(
withProps(props => ({
shouldUseWithMyHoc: someCondition() // true or false
})),
withState('someState', 'setSomeState', ''),
withHandlers({
doStuff: props => evt => {
// do stuff
}
}),
withMyHoc() // should only use if `shouldUseWithMyHoc` prop is true
)(MyComponent)
Run Code Online (Sandbox Code Playgroud)
我该怎么做才能withMyHoc仅在shouldUseWithMyHoc设置为 时使用true?
我想过也许可以做一个三元组,但是进展并不顺利,当条件为假时我没有什么可以依靠的。它看起来像这样:
export default compose (
...
(props) => {(
props.shouldUseWithMyHoc
? withMyHoc()
: null)}
)(MyComponent)
Run Code Online (Sandbox Code Playgroud)
通过使用三元,我收到以下错误:
警告:无法在未安装的组件上调用 setState(或forceUpdate)。这是一个空操作,但它表明应用程序中存在内存泄漏。要修复此问题,请在 componentWillUnmount 方法中取消所有订阅和异步任务。
我有办法完成这件事吗?如果这看起来是正确的,那么我做错了什么?
事实证明我只需要在谷歌上更好地表达我的问题。HoCbranch解决recompose了我的问题,如此处指定的
对于我的组件,当我完成应用分支时,它看起来是这样的:
export default compose(
withProps(props => ({
shouldUseWithMyHoc: someCondition() // true or false
})),
withState('someState', 'setSomeState', ''),
withHandlers({
doStuff: props => evt => {
// do stuff
}
}),
branch(
(props) => props.shouldUseWithMyHoc,
withMyHoc()
)
)(MyComponent)
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
1104 次 |
| 最近记录: |