npm 包 @jhessin/react-hyperscript-helpers 使用教程-JavaScript中文网-JavaScript教程资源分享门户

什么是 @jhessin/react-hyperscript-helpers？

@jhessin/react-hyperscript-helpers 是一个为 React 应用的 H 型语法创建虚拟节点（VNode）和创建 React 元素的帮助函数集合。它与 React 的语法和复杂度更加简单，并且易于阅读和维护。

安装

安装 @jhessin/react-hyperscript-helpers 包可以使用以下命令：

npm install @jhessin/react-hyperscript-helpers --save

使用

该模块提供了 jsx-lookalike API 和非 jsx-lookalike API 的两种使用方式。

jsx-lookalike API

jsx-lookalike API 使用 JSX 的写法：

import { h1, div } from '@jhessin/react-hyperscript-helpers';

const App = () => (
  <div>
    <h1>Hello World!</h1>
  </div>
);

非 jsx-lookalike API

非 jsx-lookalike API 通过类似 h/React.createElement 的方式构建：

import { h1, div } from '@jhessin/react-hyperscript-helpers';

const App = () => div(
  null,
  h1(null, 'Hello World!'),
);

值得注意的是，两种使用方式有一些不同的细节，具体见 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