修改外部 React 组件的渲染功能（无权限）

Question

我必须使用我无法修改的反应组件。由于更改，它来自外部来源。这也可能是我导入的 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 使用我的附加 html 属性呈现来自 <Button> 的所有属性。所以我想使用原始的功能和我的附加道具。或者，如果组件无法更改另一个组件的渲染方法，这甚至是不可能的？

Answer 1

尽管refs (https://reactjs.org/docs/refs-and-the-dom.html) 可以访问组件的公共方法和属性，但您正在寻找的模式是高阶组件（HOC，https://reactjs.org/docs/higher-order-components.html）

Answer 2

除非组件是为定制而设计的，否则没有直接的方法可以做到这一点。

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" />