如何使用基於`as` 的 props 動態創建 html 元素 on react (TypeScript)

Question

我想在我的函數中基於as={""}屬性創建 a、b、div 或其他元素。

我檢查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} />
);

甚至不需要明確地傳遞孩子。 它將與“休息”道具一起傳遞。