Solid.js 最新官方文档翻译（3）—— JSX

冴羽
591 阅读5分钟

前言

Solid.js，一个比 React 更 react 的框架。每一个使用 React 的同学，你可以不使用，但不应该不了解。

目前 Solid.js 发布了最新的官方文档，但却缺少对应的中文文档。为了帮助大家学习 Solid.js，故有此系列。

我同时搭建了 Solid.js 最新的中文文档站点：solid.yayujs.com ，欢迎勘误。

虽说是翻译，但个人并不喜欢严格遵守原文，为了保证中文阅读流畅，会删减部分语句，对难懂的部分也会另做补充解释，希望能给大家带来一个好的中文学习体验。

欢迎围观我的“朋友圈”、加入“低调务实优秀中国好青年”前端社群，分享技术，带你成长。

JSX

JSX 是 JavaScript 的扩展语法。它允许您在 JavaScript 文件中编写类似 HTML 的代码，从而将渲染逻辑和内容保持在同一位置。这提供了一种简洁可读的方式来创建和表示组件。

Solid 如何使用 JSX

Solid 被设计成对齐 HTML 标准：

const element = <h1>I'm JSX!!</h1>

它提供了一个明显的优势比如从 Stack Overflow 等网站直接复制粘贴解决方案，以及直接使用设计工具中的模板。您可以在返回的 DOM 元素中使用大括号 ({ }) 来引用变量和函数从而在 HTML 中使用动态表达式：

const Component = () => {
    const animal = { breed: "cat", name: "Midnight" }

    return (
        <p>
            I have a {animal.breed} named {animal.name}!
        </p>

    )
}

这意味着 JavaScript 内容可以根据应用程序的状态或逻辑在网页上渲染。

此外，Solid 的响应式系统引入了 JSX 的细粒度响应式。当底层状态发生改变时，只会更新 DOM 中的必要部分。

在 Solid 中使用 JSX

返回单个根元素

JSX 要求组件返回单个根元素。

进阶：

使用 JSX 时，部分代码会转换为结构化 HTML，并放置在文件开头。静态元素的处理方式与动态元素不同，动态元素可能会根据数据或用户操作而发生变化。对于动态元素，会添加特殊标记以便在渲染期间更好地处理。

拥有单个根元素可创建一致且可管理的层次结构，以优化渲染和更新。

JSX 保持了 HTML 的嵌套树状结构。因此，元素之间的父子关系变得更容易理解。

闭合所有标签

自闭合标签在 JSX 中是必须的。不同于 HTML 中的 <input>, <img>, 或 <br>等元素不需要显式闭合，JSX 需要一致的自闭合标签。这将有助于避免潜在的渲染问题。

<img src="./image-here.png" />

Properties（属性） vs. attributes（特性）

注：Property 和 Attributes 通常都翻译为“属性”，这里因为涉及到比较，所以作了区分。

HTML 特性和 JSX 属性可能看起来很相似，但它们的用途不同，行为也不同。两者都提供了指定配置或传递信息的方法。然而，HTML 用于标准 Web 内容，JSX 用于创建 Solid 组件逻辑。

HTML attributes

HTML 特性是直接在 HTML 元素上设置的值。它们提供有关元素的附加信息来指导其初始行为和状态。一旦浏览器解析 HTML，这些特性通常会被转换为 DOM 对象的属性。

在 JSX 文件中，HTML 特性的使用方式与常规 HTML 非常相似，但由于是 HTML 和 JavaScript 的混合，存在一些关键差异：

  • 诸如 onClick 之类的事件监听器可以采用驼峰式或小写形式。 （注意：使用 ESLint 时，如果使用小写，将会收到警告。）
  • 如果您需要动态指定值，可以将 " 和 " 替换为大括号 ({})：
<button class="myClass" onClick={handleClick}>
    Click me!
</button>

如果您希望在 JSX 中传递对象（比如使用内联样式），则必须使用双花括号（{{}}）

<button style={{
    color: 'red',
    font-size: '2rem',
    }}>
  Click me!
</button>

JSX properties（props）

JSX 属性（通常称为“props”）有助于将数据和配置传递给应用程序的组件。它们将组件与其所需的数据连接起来，以实现无缝数据流和动态交互。

核心理念

  • 静态 props：在 Solid 的 JSX 中，静态 props 会通过克隆模板并将其用作属性的方式直接集成到 HTML
  • 动态 props：动态 props 依赖于状态，允许内容或属性是动态的。举个例子，当交互的时候更改元素的样式，就可以用信号的形式表示（value={value()}）
  • 数据传输：Props 还可以用于将资源中的数据填充组件，例如 createResource 调用，这导致组件能够对数据变化实时做出反应。

注意：

表达式，无论是固定的还是动态的，都按照 JSX 中定义的顺序应用。这适用于多种 DOM 元素，但不适用于需要以特殊顺序定义属性的元素，例如带有 type='range' 的 input 类型。

当顺序影响元素的行为时，用户必须按照元素预期的顺序定义表达式。

关于如何在 Solid 中有效使用 props，请浏览 props 页面。

Solid.js 中文文档

本篇已收录在掘金专栏 《Solid.js 中文文档》，该系列一共 25 篇。下一篇：Solid.js 最新官方文档翻译（4）—— 组件基础

此外我还写过 JavaScript 系列、TypeScript 系列、React 系列、Next.js 系列、VuePress 博客搭建系列等 14 个系列文章， 全系列文章目录：github.com/mqyqingfeng…

通过文字建立交流本身就是一种缘分，欢迎围观我的“朋友圈”、加入“低调务实优秀中国好青年”前端社群，分享技术，带你成长。

avatar
文章
阅读
粉丝