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

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 是一个符号和 react 元素实例，而不是一个类/函数。

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 元素:

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

它会像这样可行:

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

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

虽然 onlyUpdateForKeys 应该用作:

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

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