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
相关推荐
尽兴-19 分钟前
4.1 智能体核心:Agent、Sub-Agent、ReAct、规划执行
前端·javascript·react.js·agent·react·subagent
kyrie286 小时前
React中如何模拟vue中的watch,computer,v-model
react.js
放下华子我只抽RuiKe56 小时前
FastAPI 全栈后端(八):部署与运维
运维·数据库·react.js·oracle·数据挖掘·前端框架·fastapi
TheITSea6 小时前
一、React初体验:搭建、解析现代开发环境
前端·react.js·前端框架
光影少年6 小时前
避免不必要渲染:PureComponent、memo、useMemo、useCallback
react.js·面试·掘金·金石计划
aaaa954726657 小时前
终端与IDE形态Vibe Coding实测:主流AI编程工具迁移与迭代对比
javascript·react.js·ecmascript
放下华子我只抽RuiKe58 小时前
FastAPI 全栈后端(七):测试与自动化
运维·前端·人工智能·react.js·前端框架·自动化·fastapi
放下华子我只抽RuiKe51 天前
FastAPI 全栈后端(三):数据库与 ORM
前端·数据库·react.js·oracle·性能优化·前端框架·fastapi