前言
Solid.js，一个比 React 更 react 的框架。每一个使用 React 的同学，你可以不使用，但不应该不了解。
目前 Solid.js 发布了最新的官方文档，但却缺少对应的中文文档。为了帮助大家学习 Solid.js，为爱发电翻译文档。
我同时搭建了 Solid.js 最新的中文文档站点：solid.yayujs.com ，欢迎勘误。
虽说是翻译，但个人并不喜欢严格遵守原文，为了保证中文阅读流畅，会删减部分语句，对难懂的部分也会另做补充解释，希望能给大家带来一个好的中文学习体验。
欢迎围观我的“朋友圈”、加入“低调务实优秀中国好青年”前端社群，分享技术，带你成长。
Portal
<Portal> 可以将元素放在文档中的不同位置：
import { Portal } from "solid-js/web"
<Portal>
<div class="popup">...</div>
</Portal>
嵌套在 <Portal> 中的内容默认渲染在文档 body 的末尾。
位置可以通过传递给 <Portal>的 mount 属性来更改。mount 属性接收一个 DOM 节点，该节点将用作 Portal 内容的挂载点。
import { Portal } from "solid-js/web"
<Portal mount={document.querySelector("main")}>
<div class="popup">...</div>
</Portal>
当元素（例如信息弹出窗口）由于父元素的溢出设置而被剪切或遮挡时，使用 <Portal> 特别有用。通过将该元素放在父元素之外，它就不再受其父元素的溢出设置的约束。这为用户创造了更易于访问的体验，因为内容不再复杂。
信息：
<Portal>渲染的时候将会包一层元素，除非专门针对document.head。这样事件就可以根据组件层次结构而非元素层次结构进行传播。
默认情况下，子级将包裹在 <div> 中。但如果您要放入 SVG 中，则必须使用 isSVG prop 来避免将子项包在 <div> 中，此时将转为包在 <g> 中。
错误边界
<ErrorBoundary> 是一个可用于捕获子组件抛出的错误的组件。当遇到错误时，该组件将呈现 fallback UI，而不是有问题的子组件。
import { ErrorBoundary } from "solid-js";
<ErrorBoundary fallback={(err) => <div>Error: {err.message}</div>}>
<ProblematicComponent />
</ErrorBoundary>
<ErrorBoundary> 接收一个 fallback prop，用于渲染自定义错误消息，或者向用户提供友好的通知。该属性接收一个函数，该函数接收捕获的错误作为参数，提供了一种灵活的方法来处理不同的错误场景。
通过将应用程序的某些部分包装在 <ErrorBoundary> 中，您可以防止由于单个组件而发生错误时整个应用程序崩溃。
当遇到错误时，<ErrorBoundary> 组件将捕获错误并渲染 fallback UI，而不是有问题的组件。这样，即使组件发生错误，用户也可以得到受控的 UI 响应，而不是损坏的界面。
Solid.js 中文文档
本篇已收录在掘金专栏 《Solid.js 中文文档》，该系列一共 25 篇。下一篇：Solid.js 最新官方文档翻译（11）—— Effects
此外我还写过 JavaScript 系列、TypeScript 系列、React 系列、Next.js 系列、VuePress 博客搭建系列等 14 个系列文章， 全系列文章目录：github.com/mqyqingfeng…
通过文字建立交流本身就是一种缘分，欢迎围观我的“朋友圈”、加入“低调务实优秀中国好青年”前端社群，分享技术，带你成长。
