WordPress.org网站
获取WordPress
WordPress.org网站

WordPress开发人员资源

@wordpress/元素

@wordpress/元素

在本文中

返回页首

元素是在反应并提供一组实用程序来使用React组件和React元素。

安装

安装模块

npm install@wordpress/element--保存

此包假定您的代码将在2015年欧洲标准+环境。如果您使用的环境对此类语言功能和API的支持有限或不支持，您应该包括polyfill发货@wordpress/babel预设在代码中。

为什么要反应？

如果有可能引发围绕任何单个“最佳”前端框架的争论，那么选择使用任何工具都应该是为了满足系统的需求。在建模概念块，我们遵守以下技术要求：

  • 根据块的基础值（在随机图像示例，一个类别）
  • 一种描述给定这些值的块UI的方法

最基本的是，React提供了一种简单的输入/输出机制。给定一组输入（“props”），开发人员描述页面上显示的输出。这在其功能组件.React的作用是将所需的输出与页面的当前状态进行协调。

随着这些需求的增加，任何框架的提供都必然变得更加复杂；许多前端框架规定了页面路由、检索和更新数据以及管理布局的思想。React并非对此免疫，但引入的复杂性很少是由React本身引起的，而是管理支持工具的安排。通过将这些关注点转移到系统内部（WordPress核心代码），我们可以将插件作者的责任最小化为一个小而清晰的接触点集。

美国石油学会

儿童

对象，该对象提供用于处理React子级的实用程序。

克隆元素

使用扩展属性创建元素的副本。

参数

  • 要素 元素：元素
  • 道具 ?对象：要应用于克隆元素的道具

退换商品

  • 元素：克隆元素。

组件

创建WordPress组件的基类（引用、状态和生命周期挂钩）

concat儿童

连接两个或多个React子对象。

参数

  • children参数 ...?对象：要连接的子参数数组（数组/字符串/对象数组）。

退换商品

  • 阵列：串联值。

创建上下文

创建包含两个组件的上下文对象：提供者和使用者。

参数

  • 默认值 对象：存储在上下文中的默认数据。

退换商品

  • 对象：Context对象。

创建元素

返回给定类型的新元素。类型可以是字符串标记名，也可以是另一个本身返回元素的函数。

参数

  • 类型 ?（字符串|函数）：标记名或元素创建者
  • 道具 对象：元素属性，可以是应用于DOM节点的属性集，也可以是传递给元素创建者的值
  • 儿童 …元素：后代元素

退换商品

  • 元素：元素。

创建InterpolateElement

此函数用于从传入的字符串创建插值元素，该字符串具有特定标记，这些标记与字符串应如何通过转换映射值转换为元素相匹配。

用法

例如，对于给定的字符串：

“这是一个一串具有链接和自动关闭
标签“

您将得到如下内容作为conversionMap值：

{span:<span/>，a： <a href={'https://github.com' } />,自定义组件B:<自定义组件/>，}

参数

  • 插入字符串 一串：要分析的插值字符串。
  • 转换映射 记录<字符串，元素>：用于将字符串转换为react元素的映射。

退换商品

  • 元素：wp元素。

创建门户

创建可将组件呈现到其中的门户。

相关的

参数

  • 小孩 导入（“反应”）。反应元件：任何可渲染的子元素，例如元素、字符串或片段。
  • 容器 HTML元素：应将元素呈现到的DOM节点。

创建Ref

返回一个对象，该对象通过其现在的属性作为DOMElement或Element，取决于使用ref属性呈现的元素类型。

退换商品

  • 对象：Ref对象。

创建根目录

为目标DOM节点创建新的React根。

相关的

变更日志

6.2.0引入WordPress核心。

查找DOM节点

查找React组件的dom节点。

参数

  • 成分 导入（“反应”）。组件类型：组件的实例。

flushSync（刷新同步）

强制React同步刷新所提供回调中的任何更新。

参数

  • 回调 功能：回调以同步运行。

转发参考号

组件增强器，用于将引用传递到其包装的组件。传递函数参数，该参数接收道具和裁判作为其参数，使用转发的ref返回元素。返回值是转发其ref的新组件。

参数

  • 货运代理 功能：函数已通过道具和裁判，应返回一个元素。

退换商品

  • 组件：增强组件。

碎片

呈现其子级而不包含任何包装元素的组件。

水合物

已弃用自WordPress 6.2.0起。使用水合物根而不是。

将给定元素水合为目标DOM节点。

相关的

水合物根

为目标DOM节点创建一个新的React根，并使用预先生成的标记对其进行水合。

相关的

变更日志

6.2.0引入WordPress核心。

isEmpty元素

检查提供的WP元素是否为空。

参数

  • 要素 *：要检查的WP元件。

退换商品

  • 布尔值：当元素被视为空时为True。

isValid元素

检查对象是否是有效的React Element。

参数

  • 要检查的对象 对象：要检查的对象。

退换商品

  • 布尔值：如果objectToTest是有效的React元素，则为true，否则为false。

懒惰的

相关的

备忘录

相关的

站台

用于检测当前使用的平台的组件。使用平台。OS===“web”检测是否在web环境中运行。

这与React Native实现的概念相同。

相关的

用法

从“@wordpress/element”导入{Platform}；const placeholderLabel=平台选择（{native:__（'添加媒体'），网站：__('拖动图像、上传新图像或从库中选择文件。'),} );

PureComponent公司

相关的

原始HTML

组件被用作具有未转义HTML的Fragment的等价物，在不需要包装元素就可以呈现危险HTML的情况下。为了保留额外的道具div公司包装器将如果有任何道具儿童已通过。

参数

  • 道具 原始HTMLProps：子项应该是HTML字符串或字符串数组。其他道具将传递到div包装器。

退换商品

  • JSX公司。元素：危险地降低组件。

提供

已弃用自WordPress 6.2.0起。使用创建根目录而不是。

将给定元素呈现到目标DOM节点。

相关的

渲染到字符串

将React元素序列化为字符串。

参数

  • 要素 导入（“反应”）。反应节点：要序列化的元素。
  • 上下文 [对象]：上下文对象。
  • 传统上下文 [对象]：旧上下文对象。

退换商品

  • 一串：序列化元素。

启动过渡

相关的

严格模式

为其子体激活其他检查和警告的组件。

暂停

相关的

开关子节点名称

切换子对象中所有元素的nodeName。

参数

  • 儿童 ?对象：子对象。
  • 节点名称 一串：节点名称。

退换商品

  • ?对象：更新的子对象。

卸载组件到节点

已弃用自WordPress 6.2.0起。使用root.unmount（）而不是。

从目标DOM节点中删除任何已装入的元素。

相关的

使用回调

相关的

使用上下文

相关的

使用调试值

相关的

使用延迟值

相关的

使用效果

相关的

使用ID

相关的

使用强制句柄

相关的

使用插入效果

相关的

使用布局效果

相关的

使用备忘录

相关的

使用减速器

相关的

使用参考号

相关的

使用状态

相关的

使用SyncExternalStore

相关的

使用转换

相关的

参与此包

这是古腾堡项目的一部分。该项目组织为单回购。它由多个独立的软件包组成，每个包都有特定的用途。此monorepo中的包发布到净现值法并由使用WordPress（文字出版社）以及其他软件项目。

要了解更多关于对这个包或古腾堡整体贡献的信息，请阅读该项目的主要内容投稿人指南.

首次发布

上次更新时间

编辑文章

在GitHub上进行改进：@wordpress/element