React组件prefix失效suffix正常 TypeScript类型冲突问题咨询

• 你自定义的Props类型继承了React.LiHTMLAttributes<HTMLLIElement>，该类型包含了所有<li>标签的原生HTML属性，其中prefix是HTML标准定义的全局属性，类型为string | undefined，而suffix并不属于原生HTML属性，所以不会有冲突。
• 当你用交叉符&合并原生属性类型和自定义属性类型时，两个prefix字段的类型（原生string和自定义React.ReactNode）不兼容，最终该字段的类型会推导为never，这就是你传React节点作为prefix会报错、属性失效的原因。
• 另外你当前的组件代码里没有把拿到的prefix、suffix渲染到返回的JSX结构中，就算类型问题解决了也不会看到你传入的内容。

方案1：排除原生的prefix属性（推荐） #

用TS的Omit工具类型把原生属性里的prefix去掉，优先使用你自定义的类型：

// 仅需修改Props定义即可
type Props = Omit<React.LiHTMLAttributes<HTMLLIElement>, 'prefix'> & {
  prefix?: React.ReactNode;
  suffix?: React.ReactNode;
};

同时修改组件的返回结构，把prefix、suffix渲染出来：

return <li ref={subMenuRef}>{prefix}hello{suffix}</li>;

方案2：修改自定义属性名避免冲突 #

直接把自定义的属性名改成不会和原生属性重合的命名，从根源避免冲突：

type Props = React.LiHTMLAttributes<HTMLLIElement> & {
  prefixNode?: React.ReactNode;
  suffixNode?: React.ReactNode;
};
// 组件内对应修改解构的属性名，使用组件时也传入prefixNode、suffixNode即可

内容的提问来源于stack exchange，提问作者helloworld331