Изменить функцию рендеринга внешнего компонента React (без доступа) - PullRequest
Новая
       8

Изменить функцию рендеринга внешнего компонента React (без доступа)

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

Мне нужно использовать компонент реакции, который я не могу изменить. Это из внешнего источника, из-за изменений. Это также может быть компонент из пакета npm, который я импортирую. Вот как это выглядит, простая кнопка: 

class Button extends React.Component {

 // ... more code above  
 render() {
  const { onClick, disabled, children} = this.props;

  return (
    <button className={this.getClasses()} onClick={onClick} disabled={disabled}>
      {this.props.symbol && <Icon symbol={this.props.symbol} />}
      {children}
    </button>
  );

 }

}

Как я могу добавить некоторые функции без доступа к файлу (я могу создать свой собственный компонент, который расширяет кнопку)? Например, я хочу туда type опору. Я думал, что могу просто создать <ButtonExtend onClick={resetState} type="button />.

Как я могу это сделать? В идеале я хотел бы сделать это еще более гибким, поэтому я также могу сделать: <ButtonExtend onClick={resetState} type="submit" name="extended button" />.

Я ожидаю, что html отобразит все свойства из <Button> с моими дополнительными атрибутами html. Поэтому я хочу использовать функциональность оригинала и мои дополнительные реквизиты. Или это даже невозможно, изменить метод рендеринга другого компонента, если компонент не делает это возможным?

Ответы [ 2 ]

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

Несмотря на то, что общедоступные методы и свойства компонента доступны по refs (https://reactjs.org/docs/refs-and-the-dom.html), вы ищете шаблон High Component Components (HOC, https://reactjs.org/docs/higher-order-components.html)

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

Если компонент не был разработан для настройки, простого способа сделать это не существует.

Button - пример плохо сконструированного компонента, поскольку он не принимает дополнительные реквизиты. Вопрос и PR могут быть отправлены в хранилище для решения исходной проблемы.

В расширенном компоненте это можно исправить, передавая реквизиты из расширенного компонента.

Родитель render Результат может быть изменен: 

class ButtonExtend extends Button {
 // ... more code above  
 render() {
  const button = super.render();
  const { symbol, children, ...props } = this.props;

  return React.cloneElement(button, {
    children: [
      symbol && <Icon symbol={symbol} />,
      ...children
    ],
    ...props
  });
}

Если элемент, который необходимо изменить, является вложенным, это может стать грязным и привести к ненужному созданию элементов.

Более чистый способ - вставить render в расширенный компонент и изменить его: 

class ButtonExtend extends Button {
 // ... more code above  
 render() {
  const { symbol, children, ...props } = this.props;

  return (
    <button className={this.getClasses()} {...props}/>
      {symbol && <Icon symbol={symbol} />}
      {children}
    </button>
  )
 }
}

Таким образом, его можно использовать как 

<ButtonExtend onClick={resetState} type="submit" name="extended button" />
...