如何使用 react 创建打字稿装饰器

Question

I'm trying to create a react class decorator that adds a few props to any react component and returns the decorated component with it's current props plus the additional props from the decorator.

I was able to find working code for a regular typescript class decorator which can found on typescript's decorator handbook . However, this is for a generic class. It doesn't include any react types.

Below is something similar that I'd like to accomplish with React and 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

A basic decorator would function like an HoC wrapper

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

you would use it like

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

Here's a working example.