Question

我正在将React15与打字稿一起使用。下面是我的代码：

const WrappedComponent = (WrappedComponent: React.ComponentType<any>) => (<WrappedComponent className="my-class" />);

WrappedComponent(<div />);

我定义了一个WrappedComponent方法，该方法接受任何react组件。然后，我调用该方法传递了一个<div />元素。但是我遇到了以下错误：

Argument of type 'Element' is not assignable to parameter of type 'ComponentType<any>'.
  Type 'Element' is not assignable to type 'StatelessComponent<any>'.
    Type 'Element' provides no match for the signature '(props: any, context?: any): ReactElement<any> | null'.

它报告有关Element和ComponentType的类型错误。我想知道如何将Element转换为react component方法。 JSX元素不是React组件吗？

另一个问题是关于如何在WrappedComponent中定义常规组件属性来替换<any>？

Answer 1

JSX元素不是组件。 JSX反编译为React.createElement调用，而不是组件：

https://reactjs.org/docs/jsx-in-depth.html

在React中，组件必须是使用render方法扩展Component的类，或者是返回JSX的函数。

如果要传递并在组件中呈现任意JSX，则只需使用children。或者，如果您需要更复杂的东西，请尝试渲染道具：

const Wrapper = ({ render }) => <div>{render()}</div>

<Wrapper render={() => <div/>} />

为什么我不能在响应中将通用JSX传递给包装的组件？

1 个答案: