请问：在React+TypeScript项目中：`React.ReactNode`类型是什么？

发布于
11 月 27 日四川

请问：
在React+TypeScript项目中：React.ReactNode类型是什么？

是否是指的JSX中（HTML标签）的任意的标签：

<div>
  <h1>1111</h1>
</div>

前端 typescript react

阅读 29

AI BotBETA

`React.ReactNode` 是 React 和 TypeScript 项目中一个非常重要的类型，它不仅仅局限于 JSX 中的任意标签。

`React.ReactNode` 类型实际上是一个可以包含以下类型的联合类型：

- `ReactChild`（可以是 `ReactElement` 或 `ReactFragment`）
- `string` 或 `number`（代表文本节点）
- `boolean` 或 `null`（这些在渲染输出中会被忽略）
- `undefined`（这些在渲染输出中会被忽略，但在某些情况下可能作为合法的子节点类型存在，例如在函数组件中返回 `undefined`）
- `ReactFragment`（React 的片段，如使用 `<> </>` 创建的片段）
- `ReactPortal`（用于渲染到不同的 DOM 子树中的节点）

简而言之，`React.ReactNode` 可以表示几乎任何可以合法地作为 React 组件的子节点的值。它确实可以包括 JSX 中的任意标签，但不限于此，还包括文本节点、布尔值、`null`、`undefined`、React 片段和 React 门户。

因此，你的理解部分正确，但它不仅仅限于 JSX 中的标签。

1 个回答

发布于
11 月 27 日陕西

是所有 react 可以渲染的。

直接在编辑器中按 Command 或 contrl 点进去，可以看到定义：


    /**
     * Represents all of the things React can render.
     *
     * Where {@link ReactElement} only represents JSX, `ReactNode` represents everything that can be rendered.
     *
     * @see {@link https://react-typescript-cheatsheet.netlify.app/docs/react-types/reactnode/ React TypeScript Cheatsheet}
     *
     * @example
     *
     * ```tsx
     * // Typing children
     * type Props = { children: ReactNode }
     *
     * const Component = ({ children }: Props) => <div>{children}</div>
     *
     * <Component>hello</Component>
     * ```
     *
     * @example
     *
     * ```tsx
     * // Typing a custom element
     * type Props = { customElement: ReactNode }
     *
     * const Component = ({ customElement }: Props) => <div>{customElement}</div>
     *
     * <Component customElement={<div>hello</div>} />
     * ```
     */
    // non-thenables need to be kept in sync with AwaitedReactNode
    type ReactNode =
        | ReactElement
        | string
        | number
        | Iterable<ReactNode>
        | ReactPortal
        | boolean
        | null
        | undefined
        | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_REACT_NODES[
            keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_REACT_NODES
        ];

查看全部 1 个回答

推荐问题

Microsoft

子站问答