修改外部React组件的渲染功能（无访问权限） [英] Modify render function of external React component (with no access)

问题描述

我必须使用无法修改的react组件。由于更改，它来自外部来源。这也可能是我导入的npm包中的组件。它看起来像一个简单的按钮：

I have to use a react component that I cannot modify. It's from an external source, due to changes. This could also be a component from a npm package that I import. This is what it looks like, a simple button:

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

How can I add some functionality with no access to the file (I can create my own component that extends the button)? For example, I want a type prop in there. I thought I can just create a <ButtonExtend onClick={resetState} type="button />.

我该怎么做呢？理想情况下，我想使其更加灵活，因此我也可以这样做：< ButtonExtend onClick = {resetState} type = submit name = extended button / > 。

How can I do this? Ideally I would like to make this even more flexible, so I can also do: <ButtonExtend onClick={resetState} type="submit" name="extended button" />.

我希望html能够呈现< Button> 和其他html属性，因此我想使用原始功能和其他道具，或者如果该组件无法实现，则甚至无法更改另一个组件的render方法吗？

I would expect the html to render all the properties from <Button> with my additional html attributes. So I want to use the functionality of the original and my additional props. Or it this not even possible, to change the render method of another component, if the component doesn't make it possible?

推荐答案

除非组件是为自定义设计的，否则没有简单的方法可以做到这一点。

Unless a component was designed for customization, there is no straightforward way to do this.

按钮是组件设计不佳的示例，因为它不接受其他道具，因此可以将问题和PR提交到存储库中，以便解决原始问题

Button is an example of badly designed component because it doesn't accept additional props. An issue and PR could be submitted to the repository in order to address original problem.

在扩展组件中，可以通过传递扩展组件中的道具来解决此问题。

In extended component, this can be fixed by passing props from extended component.

父母 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
  });
}

如果嵌套了需要修改的元素，则可能会变得混乱并且

If an element that needs to be modified is nested, this may become messy and result in unnecessarily created elements.

一种更清洁的方法是将 render 粘贴到扩展组件中并对其进行修改：

A cleaner way is to paste render in extended component and modify it:

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

这篇关于修改外部React组件的渲染功能（无访问权限）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！