Typescript 渲染组件时 React js 出现错误

发布于07月22日

我在从对象渲染组件时出现错误.

ype 'FC<Boxprops> | ExoticComponent<{ children?: ReactNode; }>' is not assignable to type 'FC<Boxprops>'.
  Type 'ExoticComponent<{ children?: ReactNode; }>' is not assignable to type 'FunctionComponent<Boxprops>'.

我正在try 在对象键的基础上呈现组件

import "./styles.css";
import { BOX, Boxprops } from './box'
import React from "react";
let obj = {
  component:'box'
}
export default function App() {

  const getComponnets = () => {
    let Component: React.FC<Boxprops> = obj.component === 'box' ? BOX : React.Fragment

    return <Component title="asd" />
  }
  return (
    <div className="App">
      {getComponnets()}
    </div>
  );
}

以下是我的代码 https://codesandbox.io/s/naughty-fermat-szgggm?file=/src/App.tsx个

有什么 idea 吗..?？

推荐答案

屏幕截图中就显示了预期的类型.一定要try 一下IntelliSense推断的东西.

import "./styles.css";
import { BOX, Boxprops } from "./box";
import React from "react";

let obj = {
  component: "box"
};

type IComponent =
  | React.FC<Boxprops>
  | React.ExoticComponent<{
      children?: React.ReactNode;
    }>;

export default function App() {
  const Component: IComponent = React.useMemo(
    () => (obj.component === "box" ? BOX : React.Fragment),
    []
  );

  return (
    <div className="App">
      <Component title="asd" />
    </div>
  );
}