什么是 @jhessin/react-hyperscript-helpers？
@jhessin/react-hyperscript-helpers 是一个为 React 应用的 H 型语法创建虚拟节点（VNode）和创建 React 元素的帮助函数集合。它与 React 的语法和复杂度更加简单，并且易于阅读和维护。
安装
安装 @jhessin/react-hyperscript-helpers 包可以使用以下命令：
--- ------- ---------------------------------- ------
使用
该模块提供了 jsx-lookalike API 和非 jsx-lookalike API 的两种使用方式。
jsx-lookalike API
jsx-lookalike API 使用 JSX 的写法：
------ - --- --- - ---- -------------------------------------
----- --- - -- -- -
-----
--------- -----------
------
--非 jsx-lookalike API
非 jsx-lookalike API 通过类似 h/React.createElement 的方式构建：
------ - --- --- - ---- ------------------------------------- ----- --- - -- -- ---- ----- -------- ------ --------- --
值得注意的是，两种使用方式有一些不同的细节，具体见 https://github.com/jhessin/react-hyperscript-helpers 的文档。
常用函数
该模块提供了一系列常用函数:
- a
- article
- button
- code
- div
- em
- form
- h1, h2, h3, h4, h5, h6
- hr
- iframe
- img
- input
- label
- li
- link
- meta
- nav
- ol
- optgroup
- option
- p
- pre
- section
- select
- span
- strong
- table, thead, tbody, tr, th, td
- textarea
- ul
它们用于快速构建常见元素的文本渲染节点或 React 应用元素。
示例代码
------ ----- ---- --------
------ - ---- --- ------ - ---- -------------------------------------
----- ----------- - ----------- -- -
-----
------------------
------
-
------ ------- -------- ----- -
----- ------- - ------ --------
------ -
-----
------------ ----------------- --
- ----
- ------ ------------------ --
-------- ------ -------- -- ------- ----
-------- ------ -------- -- ------- ----
--
------
-
-在本示例代码中，我们使用了 div、h1、button 函数来创建节点，以及自定义的 UserMessage 组件。它展示了如何使用 @jhessin/react-hyperscript-helpers 来创建我们的 React 应用。这些函数是常用的，可以用来构建常见的 UI 元素，而且比较易于理解和修改。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600575c781e8991b448ea786