Semantic UI React
官方 Semantic-UI-React 集成。

简介

Semantic UI React 是 Semantic UI .

jQuery 免费
声明式 API
增强
简写属性
子组件
自动控制状态

安装说明在 使用 部分提供。

jQuery 免费

jQuery 是一个 DOM 操作库。它读取和写入 DOM。React 使用虚拟 DOM(真实 DOM 的 JavaScript 表示)。React 仅写入DOM 的补丁更新,但从不读取它。

将真实的 DOM 操作与 React 的虚拟 DOM 同步是不可能的。因此,所有 jQuery 功能已在 React 中重新实现。

声明式 API

声明式 API 提供强大的功能和属性验证。

JSX
渲染的 HTML
JSX
渲染的 HTML

增强

控制渲染的 HTML 标签,或将一个组件作为另一个组件渲染。额外的属性被传递到您作为渲染的组件。

增强功能非常强大。您可以组合组件功能和属性,而无需添加额外的嵌套组件。这对于使用 MenuLinks react-router.

JSX
渲染的 HTML
JSX
渲染的 HTML

简写属性

简写属性为您生成标记,使许多用例变得轻而易举。所有对象属性都散布在子组件上。

子对象数组

具有重复子元素的组件接受普通对象的数组。 Facebook 喜欢这种方式 而不是使用上下文来处理父子耦合,我们也是。

JSX
渲染的 HTML

icon={...}

icon 属性是许多组件的标准属性。它可以接受一个 Icon name、一个 Icon 属性对象或一个 <Icon /> 实例。

JSX
渲染的 HTML

image={...}

image 属性是许多组件的标准属性。它可以接受一个图片 src、一个 Image 属性对象或一个 <Image /> 实例。

JSX
渲染的 HTML

子组件

子组件让您完全访问标记。这对灵活地自定义组件至关重要。

JSX
渲染的 HTML

自动控制状态

React 有 受控和非受控 组件的概念。

我们的有状态组件开箱即用地自行管理其状态,无需连接。下拉菜单在点击时打开,无需将 onClick 连接到 open 属性。该值也存储在内部,无需将 onChange 连接到 value

如果您添加 value 属性或 open 属性,下拉菜单将为该属性委派控制权给您的值。其他属性仍然是自动控制的。您可以随意混合和匹配任何数量的受控和非受控属性。您可以随时添加或删除控制,方法是添加或删除属性。一切都会正常工作。

查看我们的 ModernAutoControlledComponent 了解它是如何实现的。查看文档并实时尝试。

由以下机构提供闪电般的部署 Vercel.