ReactJs笔记摘录

前言

以前2018年搞过一段时间react + antd开发，兜兜转转又回到react世界。

TODO中

Hook函数

JSX语法

根元素与斜杠

注意局部的jsx片段也要加根元素:

return (
 <div>
  {
   items.map((item) => (
   // 此处只能有一个根元素!!!
   <>
     ...
     <div className="flex min-w-fit min-h-fit h-24 w-24 border-4 rounded-md bg-white-100 justify-center">
         // img后要加斜杠
         <img loading="lazy" src="http://www.icoolcms.com/cms/link/logo/2384"/>
     </div>
   </>
 ))}
 </div>
)

使用变量

<img className="logoImg" loading="lazy" src={
   `http://www.icoolcms.com/cms/link/logo/${
     item.linkId}`}/>

推荐使用className替代class

className属性是React中使用的属性名称，用于避免与JavaScript的保留关键字class冲突。

UI 问题

选择哪个UI框架？

除了大名鼎鼎的antd之外，其实还有很多选择。react-bootstrap也是堂堂正正，大部分UI组件都不错。

Multilevel menu 和 mega menu

antd支持multilevel-dropdown-menu，但貌似不支持Mega Menu。

参考链接

UI框架

• Ant Design: 88k stars，可惜不是基于tailwindcss的。
• react-bootstrap
• daisyui： 27k stars
• material-ui
• shadcn
• hyperui
• flowbite
  Build websites even faster with components on top of Tailwind CSS，Start developing with an open-source library of over 600+ UI components, sections, and pages built with the utility classes from Tailwind CSS and designed in Figma.
• primefaces
• preline： Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.
• 基于Tailwindcss的headlessui
• Evergreen Segment
• Blueprint React UI
• Material Design for Bootstrap v5 & v4: Top quality open-source UI Kits
• Grommet
• visx
• Chakra
• React-admin
  About A frontend Framework for building data-driven applications running on top of REST/GraphQL APIs, using TypeScript, React and Material Design
• Semantic UI React
• nextui: Beautiful, fast and modern React UI library.
• fluent2
• retool: 要收费
• React Redux

组件

• multilevel-dropdown
• how-create-multilevel-dropdown-menu