React.createElement 的输入无效

Question

如何将 React.createElement 与 TypeScript 一起使用？

import React from "react";


type Props = {
  label: string;
};

const Three: React.FC<Props> = (props: Props) => {
  return <div>{props.label}</div>;
};

/**
 * Three component expects `label` prop
 * But here it is `undefined` - props argument should be second argument
 * Such behaviour leads to error in runtime
 */
const MainButton = (prop: Props) => React.createElement(Three);

export default MainButton

Demo1 Demo2

  "dependencies": {
    "react": "17.0.0",
    "react-dom": "17.0.0",
    "react-scripts": "3.4.3",
    "typescript": "4.1.3"
  },

这是我的解决方法。这里我做了 props 必需的参数，因为 here 它们是可选的，即使组件有属性。

const createElement = <T,>(Comp: FC<T>, props: T) => React.createElement(Comp, props);

我错过了什么吗？我知道 TS 不会抱怨缺少道具，因为它们是可选的。您是如何解决此类问题的？

我想在 Github 上创建一个问题，但决定先到这里。

Answer 1

您需要将道具传递给子元素：

const MainButton = (prop: Props) => React.createElement(Three, props);

或者：

const MainButton = (prop: Props) => React.createElement(Three, {label: props.label});

或者更好的是，只需使用 Three 作为默认导出。无需创建函数来实例化元素。

React.createElement 的输入无效

Typings for React.createElement are invalid

typescript

reactjs

react-typescript