reactjs - TypeScript/JSX 中 React.createElement 的正确语法

Question

我无法让 React.createElement 在 TypeScript 中编译。

interface IColorPickerProps {

}

interface IColorPickerState {

}

class ColorPicker extends React.Component<IColorPickerProps, IColorPickerState> { 
    constructor(props: IColorPickerProps) {
        super(props);
    }
}

组件创建:

let props: any = {}
React.createElement(ColorPicker, props)

我得到这个编译错误:

Argument of type 'typeof ColorPicker' is not assignable to parameter of type 'string | ComponentClass<IColorPickerProps> | StatelessComponent<IColorPickerProps>'.
  Type 'typeof ColorPicker' is not assignable to type 'StatelessComponent<IColorPickerProps>'.
    Type 'typeof ColorPicker' provides no match for the signature '(props: IColorPickerProps & { children?: ReactNode; }, context?: any): ReactElement<any> | null'.

如果我删除构造函数，错误就会消失。我不能使用语法，因为 props 需要动态传递。有什么想法吗？

Answer 1

当我运行 filename.tsx，然后运行 ​​node filename.js 时，你编译的代码对我来说很好。您还有其他代码吗？

在类中输入 Prop 的全部意义在于让您知道将传递给您的 ColorPicker 类的内容。在我看来，最好的办法是修复您的 IColorPickerProps 接口(interface)以包含将像这样传递的 Prop 。

interface IColorPickerProps {
    name: string,
    age: number
}

然后

let myprops: IColorPickerProps = {
    name: ...
    age: ...
}

如果您按原样输入 props，那么您就有点违背了类型检查的目的。