谁能帮我理解为什么在“后缀”起作用时“前缀”不起作用以及如何解决这个问题？

Question

我想我了解prefix react prop 与此处的 html 属性 prefix 发生冲突。

我不明白为什么 typescript 使用 html prefix 当这是一个 react prop？

谢谢

https://codesandbox.io/s/typescript-playground-export-forked-qb0nd?file=/index.tsx

import React, { forwardRef, LegacyRef } from "react";

type Props = React.LiHTMLAttributes<HTMLLIElement> & {
  prefix?: React.ReactNode;
  suffix?: React.ReactNode;
};

const SubMenu: React.ForwardRefRenderFunction<unknown, Props> = (
  { prefix, suffix },
  ref
) => {
  const subMenuRef: LegacyRef<HTMLLIElement> =
    (ref as any) || React.createRef<HTMLLIElement>();

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

const SubMenuEl = forwardRef<unknown, Props>(SubMenu);

export function App() {
  return <SubMenuEl prefix={<div>bb</div>} suffix={<div>aa</div>} />;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

因为您使用的是交集类型&，如果两种类型具有相同的字段名称，它的工作方式就是这样。你可以这样避免：

type Props = Omit<React.LiHTMLAttributes<HTMLLIElement>, 'prefix'> & {
  prefix?: React.ReactNode;
  suffix?: React.ReactNode;
};