Input组件中prefix中props的prefix与suffix的类型问题

Question

我自定义的prefix、suffix就是前后缀，希望能够支持string、原生的html、组件等
但是不太确定props应该是什么类型，试了ReactNode、JSX.IntrinsicElements、ReactElement，都不行，请问老师应该是什么类型为好，主要是props传入的时候会报错

Answer 1

张轩 2022-07-29 10:16:23

同学你好 

我使用了对应的类型是不会报错的，请看截图：

我觉得原来来自你的编辑器的推断，因为看截图它将 <div>123</div> 推论成了一个 Element 类型，这是一个 DOM 的基类，并不是一个真正的 ReactElement。

请看看你的编辑器设置是否正确，是否支持 tsx 呢？

Answer 2

提问者 慕工程0515303 2022-07-28 09:30:17

interface InputProps {
  /* disabled，input是否被禁用 */
  disabled?: boolean;
  /* size，input的大小 */
  size?: InputSize;
  /* icon，input的icon */
  icon?: IconProp;
  /* prefix，input的搜索前缀，比如https//、http// */
  prefix?: React.ReactNode;
  /* prefix，input的搜索后缀，比如.com、.cn */
  suffix?: React.ReactNode;
  /* className，自定义类名 */
  className?: string;
}

type NativeInputProps = React.InputHTMLAttributes<HTMLElement>;

export type FInputProps = InputProps & Partial<Omit<NativeInputProps, "size">>;

上面是我完整定义的props，下面是问题所在：

Answer 3

张轩 2022-07-28 09:21:19

同学你好 可以看看这个帖子：https://stackoverflow.com/questions/58123398/when-to-use-jsx-element-vs-reactnode-vs-reactelement

讲述了 ReactNode，ReactElement，JSX.Element 等关系。

这里我觉得 ReactNode 很合适啊

ReactNode is wider, it can be text, number, boolean, null, undefined, a portal, a ReactElement, or an array of ReactNodes. It represents anything that React can render.

它可以是 text,number,boolean 一系列等等，为啥你用的不行呢？有什么错误和问题吗？

• 提问者 慕工程0515303 #1

  老师详细的问题在回答里补充了