reactjs - 创建自定义组件包装器

Question

我正在将反应代码迁移到打字稿，并且类型自定义组件包装器存在一个问题。我正在发送as道具，我将从中创建组件并将其用作 JSX。默认情况下，它设置为，div但也可以是 React 组件，特别是自定义Link组件，它RouterLink从react-router-dom或a标记返回。

当前代码

function DropdownMenuItemWrapper({
  as ='div',
  to,
  target,
  onClick,
  active,
  children
}) {    
  const Wrapper = as ;

  return (
    <Wrapper
      to={to}
      target={target}
      onClick={onClick}
    >
      {children}
    </Wrapper>
  );
}

问题是，我不知道如何键入as属性以及如何使用Wrapper. 如果我尝试类似：

const Wrapper = React.createElement(as);要不就const Wrapper = as;

我得到了错误：JSX element type 'Wrapper' does not have any construct or call signatures.

标签： reactjstypescript

Answer 1

关 ：）

type DropdownMenuItemWrapperProps = {
   as: Parameters<typeof React.createElement>[0],
   // other props type
}

const DropdownMenuItemWrapper = ({
  as = "div",
  to,
  target,
  onClick,
  active,
  children
}: DropdownMenuItemWrapperProps) => React.createElement(as, { to, target, onClick }, children);