React.ReactElement 与 React.ReactNode

  • React.ReactNode 在 JSX 中作为子元素传递的所有可能类型的并集,这是对子元素的一个非常宽泛的定义。
js 复制代码
<RNode><p>One element</p></RNode>
 <RNode>
   <>
     <p>Fragments for</p>
     <p>More elements</p>
   </>
 </RNode>
 <RNode>1</RNode>  
 <RNode>Hello</RNode>
 <RNode>{null}</RNode>
 <RNode>{true}</RNode>
 
 <RNode />    // Error: Must have children though
  • React.ReactElement 只包括 JSX 元素,而不包括 JavaScript 原始类型,如 string 或 number。
js 复制代码
<RElement><p>More elements</p></RElement>
 <RElement>
   <>
     <p>More elements</p><p>More elements</p>
   </>
 </RElement>
 
 <RElement>1</RElement>     // Error: Must be a JSX element
 <RElement>Hello</RElement>    // Error: Must be a JSX element
 <RElement>{null}</RElement>    // Error: Must be a JSX element
 <RElement>{true}</RElement>    // Error: Must be a JSX element
 <RElement />    // Error: Must have children though
相关推荐
奔跑草-1 小时前
【前端】深入浅出 - TypeScript 的详细讲解
前端·javascript·react.js·typescript
林太白8 小时前
❤React-React 组件通讯
前端·javascript·react.js
豆华8 小时前
React 中 为什么多个 JSX 标签需要被一个父元素包裹?
前端·react.js·前端框架
前端熊猫8 小时前
React第一个项目
前端·javascript·react.js
练习两年半的工程师8 小时前
使用React和Vite构建一个AirBnb Experiences克隆网站
前端·react.js·前端框架
林太白8 小时前
❤React-JSX语法认识和使用
前端·react.js·前端框架
女生也可以敲代码8 小时前
react中如何在一张图片上加一个灰色蒙层,并添加事件?
前端·react.js·前端框架
布兰妮甜9 小时前
前端框架大比拼:React.js, Vue.js 及 Angular 的优势与适用场景探讨
前端·vue.js·react.js·前端框架·angular.js
老码沉思录9 小时前
React Native 全栈开发实战班 - 核心组件与导航
javascript·react native·react.js