React与TypeScript：render()的类型是什么？

Question

我正在尝试将我的组件转换为TypeScript。对于返回HTML的render函数，我应该指定哪种类型？

class Component extends React.Component {
    render() {
        return (
            <div>
                ...some HTML...
            </div>
        );       
    }
}

- Vegard Stikbakke

---

公共渲染函数(): React.ReactNode - Sergio Ivanuzzo

Answer 1

我不知道在这个问题第一次被提出时是否有，但现在React已经通过@types/react模块提供了类型。 render的返回类型是React.ReactNode，它定义如下：

type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined;

你可以在index.d.ts 文件中找到各种子类型的详细信息，位于DefinitelyTyped/DefinitelyTyped。

我能为返回 HTML 的渲染指定任何类型吗？

render 不会返回 HTML（这将是一个字符串）。根据文档:

当render被调用时，它应该检查this.props和this.state并返回以下类型之一：

• React元素。通常通过JSX创建。例如，<div />和<MyComponent />是React元素，指示React分别渲染DOM节点或另一个用户定义的组件。
• 数组和片段。让你从渲染中返回多个元素。有关更多详细信息，请参阅片段的文档。
• 门户。让您将子元素呈现到不同的DOM子树中。有关更多详细信息，请参阅门户的文档。
• 字符串和数字。这些在DOM中呈现为文本节点。
• 布尔或null。不渲染任何内容。（主要存在以支持return test && <Child />模式，其中test是布尔值。）

- T.J. Crowder

---

哦，那它不返回 HTML。谢谢！ - Vegard Stikbakke

有一些变化，现在文档指示可能返回更多的内容。 - unludo

@unludo - 谢谢。现在它已经有完整的类型可用了。（如果以前没有的话；可能已经有了。） - T.J. Crowder