使用重组实用程序作为元素

Question

我想使用 recompose 实用函数作为 react 元素，这样我就可以在 JSX 中临时使用它们。

const enhancedInput = props => {
  return (<OnlyUpdateForKeys keys={['name']}>
              <Input
                id="name"
                value={props.name}
                onBlur={props.handleNameBlur}
                onChange={props.updateName}
                type="text"
                className="validate"
                placeholder="Enter Component Name"
              />
            </OnlyUpdateForKeys>)
}

这是我迄今为止尝试过的方法，但完全失败了。

import { onlyUpdateForKeys } from 'recompose';

export const OnlyUpdateForKeys = ({ keys, children }) => {
  return onlyUpdateForKeys([...keys])(children)(children.props);
};

export default OnlyUpdateForKeys;

因为 children 是一个符号和反应元素实例，而不是 class/function。

react.development.js:368 Uncaught TypeError: Cannot set property 'props' of undefined
at Component (react.development.js:368)
at ShouldUpdate (Recompose.esm.js:558)
at OnlyUpdateForKeys (recomposeComponent.js:4)
at mountIndeterminateComponent (react-dom.development.js:14324)

有人可以指导我吗？

Answer 1

onlyUpdateForKeys([...keys]) 高阶组件期望 React component 作为参数，而 children 是 React element :

onlyUpdateForKeys([...keys])(children)

它可以像这样工作：

export const OnlyUpdateForKeys = ({ keys, children }) => {
  const EnhancedChild = onlyUpdateForKeys([...keys])(props => children);
  return <EnhancedChild/>;
};

但这没有意义，因为它不会阻止更新子组件。 OnlyUpdateForKeys 是在每个 EnhancedInput 渲染器上创建的。每次渲染 EnhancedInput 时也会渲染 Input，因为 children 以任何方式渲染 - 否则它们将无法用作 props.children。

虽然 onlyUpdateForKeys 应该用作：

const EnhancedInput = onlyUpdateForKeys(['name'])(props => (
  <Input ... />
))

它比 OnlyUpdateForKeys 实用程序组件更短、更高效。

使用重组实用程序作为元素

Using recompose utility as element

javascript

reactjs

redux-form

recompose