Использование утилиты перекомпоновки в качестве элемента - PullRequest
Новая
       41

Использование утилиты перекомпоновки в качестве элемента

0 голосов
/ 23 октября 2018

Я хочу использовать функции перекомпоновки утилит в качестве элемента реагирования, чтобы я мог использовать их в JSX как hoc. 

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.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)

Может ли кто-нибудь помочь мне?

1 Ответ

0 голосов
/ 23 октября 2018

onlyUpdateForKeys([...keys]) Компонент высшего порядка ожидает React компонент в качестве аргумента, в то время как 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 предполагается использоватьas: 

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

Это короче и эффективнее, чем OnlyUpdateForKeys служебный компонент.

...