Reactjs 缺少带有HOC和TypeScript的道具

我有这个问题已经有很长一段时间了，我已经没有主意了

我想创建一个HoC，它将向原始组件添加一些道具（函数和字符串）。到目前为止，我有：

装饰师：

import * as React from "react";

export interface TestDecoratorProps {
  sayHello: () => void;
}

const withTestDecorator = <P extends TestDecoratorProps>(
  Component: React.ComponentType<P>,
): any => (props: Pick<P, Exclude<keyof P, keyof TestDecoratorProps>>) => {
  const sayHello = () => {
    console.log("hello");
  };

  return <Component {...props as P} sayHello={sayHello} />;
};

export default withTestDecorator;

import * as React from "react";
import withTestDecorator, { TestDecoratorProps } from "@decorators/TestDecorator";

interface Props extends TestDecoratorProps {
  children: React.ReactNode;
}

@withTestDecorator
class Paragraph extends React.Component<Props> {
  public componentDidMount() {
    this.props.sayHello();
  }

  public render() {
    return <p>{this.props.children}</p>;
  }
}

export default Paragraph;

class Application extends React.Component {
  public render(): React.ReactNode {
    return (
      <Provider store={store}>
        <Paragraph>Hello</Paragraph>
      </Provider>
    );
  }
}

import*as React from“React”；
导出接口TestDecororProps{
你好：（）=>void；
}
常量withTestDecorator=(
成分：反应。成分类型
，
)：any=>（道具：拾取）=>{
const sayHello=（）=>{
console.log（“你好”）；
};
返回；
};
使用TestDecorator导出默认值；

用法：

import * as React from "react";

export interface TestDecoratorProps {
  sayHello: () => void;
}

const withTestDecorator = <P extends TestDecoratorProps>(
  Component: React.ComponentType<P>,
): any => (props: Pick<P, Exclude<keyof P, keyof TestDecoratorProps>>) => {
  const sayHello = () => {
    console.log("hello");
  };

  return <Component {...props as P} sayHello={sayHello} />;
};

export default withTestDecorator;

import * as React from "react";
import withTestDecorator, { TestDecoratorProps } from "@decorators/TestDecorator";

interface Props extends TestDecoratorProps {
  children: React.ReactNode;
}

@withTestDecorator
class Paragraph extends React.Component<Props> {
  public componentDidMount() {
    this.props.sayHello();
  }

  public render() {
    return <p>{this.props.children}</p>;
  }
}

export default Paragraph;

class Application extends React.Component {
  public render(): React.ReactNode {
    return (
      <Provider store={store}>
        <Paragraph>Hello</Paragraph>
      </Provider>
    );
  }
}

import*as React from“React”；
使用TestDecorator导入，{TestDecoratorProps}从“@decorators/TestDecorator”导入；
接口道具扩展了TestDecoratorProps{
子节点：React.ReactNode；
}
@带测试装饰器
类。组件{
公共组件didmount（）{
这个.props.sayHello（）；
}
公共渲染（）{
返回{this.props.children}
；
}
}
导出默认段落；

和实施：

import * as React from "react";

export interface TestDecoratorProps {
  sayHello: () => void;
}

const withTestDecorator = <P extends TestDecoratorProps>(
  Component: React.ComponentType<P>,
): any => (props: Pick<P, Exclude<keyof P, keyof TestDecoratorProps>>) => {
  const sayHello = () => {
    console.log("hello");
  };

  return <Component {...props as P} sayHello={sayHello} />;
};

export default withTestDecorator;

import * as React from "react";
import withTestDecorator, { TestDecoratorProps } from "@decorators/TestDecorator";

interface Props extends TestDecoratorProps {
  children: React.ReactNode;
}

@withTestDecorator
class Paragraph extends React.Component<Props> {
  public componentDidMount() {
    this.props.sayHello();
  }

  public render() {
    return <p>{this.props.children}</p>;
  }
}

export default Paragraph;

class Application extends React.Component {
  public render(): React.ReactNode {
    return (
      <Provider store={store}>
        <Paragraph>Hello</Paragraph>
      </Provider>
    );
  }
}

类应用程序扩展React.Component{
public render（）：React.ReactNode{
返回(
你好
);
}
}

我的问题是，在实现中，

段落

抛出一个错误，表示这是requires

sayHello

prop。我能做什么

---

我使用的是TypeScript 3.4.3和React 16.8.6。

装饰程序无法更改类结构。尝试使用TestDecorator（段落）@TitianCernicova Dragomir包装器直接调用hoc

导出默认值，效果很好，但我想使用装饰器来避免有多个包装器。这是一个设计限制，不管装饰器返回什么，它所装饰的类的类型都不受影响。TS只是不这样做（我知道JS decorators可以替换原始定义，但TS不对此建模）如果您想要有多个包装器，请使用
compose
。对于装饰师来说，这是不受支持的，正如所说的那样。另外，这提供了错误的语义，因为
段落
根本不是一个类，这可能会成为测试的问题。@TitianCernicova Dragomir是的，我来自JS decorators，在那里这种用法是正常的。不过，谢谢你提供的信息；）