Question

我正在尝试创建一个react类装饰器，该装饰器向任何react组件添加一些道具，并返回装饰后的组件及其当前道具以及装饰器中的其他道具。

我能够找到可以在打字稿的decorator handbook上找到的常规打字稿类修饰器的工作代码。但是，这是针对通用类的。它不包含任何反应类型。

下面是我想用React和Typescript完成的类似事情：

@AddOtherProps
class BasicComponent extends React.Component {

  static defaultProps = {
    someProp: ''
  };

  constructor(props) {
    super(props);
  }

  render() {
    return (
      <SomeComponent 
        someProp={this.props.someProp} // This is from current component
        otherProp={this.props.propFromDecorator} // This is from the decorator
      >
        {'Component Content'}
      </SomeComponent>
    );
  }
}

Answer 1

基本装饰器的功能类似于HoC包装器

function decorate(DecoratedComponent) {
  return class extends React.Component {
    render() {
      return <DecoratedComponent {...this.props} injectedProp="Hello" />;
    }
  };
}

您会像

一样使用它

@decorate
class App extends React.Component { ... }

Here's a working example.

如何使用React创建TypeScript装饰器

1 个答案: