Javascript 如何使用基于react（TypeScript）上的'as'的道具动态创建html元素

我想基于函数中的

as={”“}

prop创建a、b、div或其他元素

我正在将

检查为
，然后使用if-guard逐个创建元素。但是有什么方法可以基于as组件创建html元素呢

我希望能够创建
b、a、h4 h3
或任何没有
的元素（如果
）

我发现了类似的问题，但它使用了样式化的组件。没有它能做到吗

目前我正在这样做：

import * as React from 'react'

interface Props {
  children: (React.ReactChild | React.ReactNode) | (React.ReactChild[] | React.ReactNode[])
  onClick?: (e) => void
  as?: string
}

const DynElement: React.FunctionComponent<Props> = props => {
  const { as , children } = props

  return (
  <>
    {as === 'div' && <div {...props_rest}>
      {children}
    </div>}
    {as === 'b' && <b {...props_rest}>
      {children}
    </b>}
    </>
  )
}

export default DynElement

import*作为来自“React”的React
界面道具{
子项：（React.ReactChild | React.ReactNode）|（React.ReactChild[]| React.ReactNode[]）
onClick？：（e）=>void
as？：字符串
}
const dyneElement:React.FunctionComponent=props=>{
const{as，children}=props
返回(
{as==='div'&&
{儿童}
}
{as==='b'&&
{儿童}
}
)
}
导出默认DyneElement

用途如下：

<DynElement as="b" onClick={...}>...</DynElement>

。。。

使用TypeScript+React。
将
捕获为大写变量中的
属性，并将其用作JSX组件：

const { as: Cmp = ‘div’, ...rest } = props;

return (
  <Cmp {...rest} />
);

const{as:Cmp='div'，…rest}=props；
返回(
);

甚至不需要显式地传递子对象。它将与“rest”道具一起传递。
这给了我打字脚本上的错误。也许对JSX有效，但在TSX上我得到：
类型{children:string{124; number}boolean{}ReactElement-ReactElement-Component>）（new（props:any）=>Component）>|…55更多…|（ReactNode[]和ReactPortal）；…8更多…；as？：string；}与类型“intrinsicattes”没有共同的属性。ts（2559）
和，如果我将
as:any
而不是
string
，那么这次它会抛出一个错误：
错误：元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：未定义。您可能忘记了从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。
Ah no！我忘了在源上声明为：）对不起。这是正确的。我不知道我们可以这样做。谢谢你的教训。你使用这个组件时没有通过“as”道具吗？如果是这样的话，您需要将其默认为div（或其他类型）。我将更新我的答案以提供div回退。已更新。如果没有提供道具，现在默认为div。