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
相关推荐
萌萌哒草头将军3 小时前
pnpm + monorepo 才是 AI 协同开发的最佳方案!🚀🚀🚀
前端·react.js·ai编程
ohyeah5 小时前
深入理解 React Hooks:useState 与 useEffect 的核心原理与最佳实践
前端·react.js
前端无涯6 小时前
React中setState后获取更新后值的完整解决方案
前端·react.js
前端不太难6 小时前
Navigation State 驱动的页面调试方法论
开发语言·前端·react.js
漫天黄叶远飞11 小时前
React 组件通讯全攻略:拒绝 "Props" 焦虑,掌握数据流动的艺术
前端·react.js·前端框架
holidaypenguin12 小时前
antd 5 + react 18 + vite 7 升级
前端·react.js
济南壹软网络科技有限公司13 小时前
深度解构:基于 React 19 + WebSocket 的高性能 SocialFi 社交金融架构
websocket·react.js·金融·即时通讯
用户81686947472513 小时前
深入 useMemo 与 useCallback 的底层实现
前端·react.js
有意义1 天前
从 useState 到 useEffect:React Hooks 核心机制详解
javascript·react.js·前端工程化
学高数就犯困1 天前
React + Vite:用Fetch将.csv大文件数据转成JSON字符串
react.js