Question

我想将重组实用程序功能用作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;

因为子级是符号和react-element实例，而不是类/函数。

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。每次渲染Input时也会渲染EnhancedInput，因为children是以任何方式渲染的，否则它们将不能作为props.children使用。

onlyUpdateForKeys应该用作：

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

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

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

1 个答案: