javascript - 如何使用基于react(TypeScript)上的 `as`的props动态创建html元素

Question

我想在函数中基于 as={""} 属性创建 a、b、div 或其他元素。

我正在检查as，然后使用 if 守卫来逐一创建元素。但是有没有办法创建基于as组件的html元素呢？

我希望能够创建 b, a, h4 h3 或任何没有 if 的元素

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

目前我正在这样做:

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

用法是:

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

使用 TypeScript + React。

Answer 1

捕获大写变量中的 as 属性并将其用作 JSX 组件:

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

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

甚至不需要显式地传递子级。它将与“其余” Prop 一起传递。