javascript - 在 Typescript React 组件中为 renderAs 属性设置正确的类型？

Question

组件有时需要能够呈现为不同的 HTML 元素，具体取决于其上下文。比如这个Card组件。

import React from 'react';

export type Props = {
    className?: string,
    renderAs: any
}

export const Card: React.FC<Props> = function Card({ renderAs, className, children }) {
    const Element = renderAs;
    return (
        <Element className={`card  ${ className ? className:'' }`}>
            { children }
        </Element>
    )
}

实际使用该组件时，一切正常：

<Card renderAs="section">...</Card>
<Card renderAs="div">...</Card>

但我不确定，renderAs: any对于这个用例，如果 using 是正确的类型，我将不胜感激！

先感谢您！

标签： javascriptreactjstypescript

Answer 1

您传递的实际类型是React.ElementType，离开

export type Props = {
    className?: string,
    renderAs: React.ElementType
}

您所说的是您希望能够renderAs设置为某些固有的 JSX 元素，例如section, div, span...