Javascript 如何编写React函数组件+TypeScript的函数重载？

我知道如何编写React函数组件和TypeScript+函数重载

但当这两者结合在一起时，我感到困惑

下面是一个最低限度的代码示例来说明我想做什么：

import React, { FunctionComponent } from 'react';

type PropType1 = { type: 'type1'; name: string };
type PropType2 = { type: 'type2'; age: number };

// How do I properly hook FunctionComponent + PropType1 + PropType2?
// It's called FunctionComponent right?

function Example({ type, name, age }) {
  if (name === undefined) {
    return (
      <div>
        {type}, {age}
      </div>
    );
  } else {
    return (
      <div>
        {type}, {name}
      </div>
    );
  }
}


export default Example

此示例的用法如下所示：

<Example type="type1" name="Joseph"/>
// => <div> type1, Joseph </div>

<Example type="type2" age={18}/>
// => <div> type2, 18 </div>

<Example type="type3" name="Joseph" age={18}/>
// => Compile Error!

如何正确钩住FunctionComponent+PropType1+PropType2

而且，它被称为FunctionComponent，对吗？

您可以尝试检查道具输入组件

import React, { FunctionComponent } from 'react';

type PropType1 = { type: 'type1'; name: string };
type PropType2 = { type: 'type2'; age: number };

function Example(props: PropType1 | PropType2) {
  if (props.type === 'type1') {
    return (
      <div>
        {props.type}, {props.name}
      </div>
    );
  } else {
    return (
      <div>
        {props.type}, {props.age}
      </div>
    );
  }
}

export default Example;

用法

尝试使用，功能组件，与

FC类型提供了一些额外的属性，例如displayName、defaultProps等，以使功能组件更加类型安全

Union类型可以提供类似的函数重载功能。它限制了属性的组合，可以选择PropType1或PropType2

常量示例：FC=props=>{ 如果props.type==='type1'{ 回来 {props.type}，{props.name} ; }否则{ 回来 {props.type}，{props.age} ; } } 我自己解决的

import React, {
    PropsWithChildren,
    ReactElement
} from 'react';

type PropType1 = { type: 'type1'; name: string };
type PropType2 = { type: 'type2'; age: number };

function Example(props: PropsWithChildren<PropType1>): ReactElement | null;
function Example(props: PropsWithChildren<PropType2>): ReactElement | null;

function Example(props: {
  type: 'type1' | 'type2';
  name?: string;
  age?: number
}) {

  const {type, name, age} = props

  if (name === undefined) {
    return (
      <div>
        {type}, {age}
      </div>
    );
  } else {
    return (
      <div>
        {type}, {name}
      </div>
    );
  }
}


export default Example

---

这似乎有效！谢谢，如果真的有函数重载实现解决方案，我将再等几秒钟。

import React, {
    PropsWithChildren,
    ReactElement
} from 'react';

type PropType1 = { type: 'type1'; name: string };
type PropType2 = { type: 'type2'; age: number };

function Example(props: PropsWithChildren<PropType1>): ReactElement | null;
function Example(props: PropsWithChildren<PropType2>): ReactElement | null;

function Example(props: {
  type: 'type1' | 'type2';
  name?: string;
  age?: number
}) {

  const {type, name, age} = props

  if (name === undefined) {
    return (
      <div>
        {type}, {age}
      </div>
    );
  } else {
    return (
      <div>
        {type}, {name}
      </div>
    );
  }
}


export default Example