片段
片段
假设我们想要以以下 HTML 结束:
将该 HTML 复制/粘贴到我们的 React 应用程序中,将其转换为 JSX。然而,我们最终遇到了一个错误:
错误消息告诉我们使用“JSX 片段”,我们很快就会详细了解这个。但首先,让我们花一点时间思考一下。为什么会出现错误?
花几分钟时间来研究这个问题。你能弄清楚为什么这是无效的吗?
在尝试解决这个问题几分钟后,观看这个视频以获取解释:
所以,这就是为什么这段代码无效的原因。我们怎么修复它呢?
一种选择是将两个 React 元素包裹在一个 div 中:
如果我们检查原始的 JS 代码,我们会看到我们不再返回多个表达式:
所以,这修复了语法错误,但并不理想。它使 DOM 充满了不必要的元素。这甚至可能导致可访问性和布局问题,例如这样:
在这个例子中,列表项应该在单行中显示,但 <div> 会打破 Flexbox 算法。它还会产生无效的标记,这意味着它可能会给依赖辅助技术如屏幕阅读器的人造成问题。
幸运的是,还有更好的方法。我们可以使用片段。
片段是一个特殊的 React 组件,它不会生成 DOM 节点。它的样子是这样的:
如果在我们的开发者工具中检查输出,我们会看到我们的两个 HTML 元素, <h1> 和 <p> ,直接位于容器元素( <div id="root"> )内部:
速记
React 片段也可以使用以下语法创建:
这种简写语法可能看起来有点神奇/奇怪,但我还挺喜欢的。它表明这是一个“空”的 HTML 标签。
JSX编译后的JavaScript如下
React 团队专门包含了这个特殊组件,使我们能够从组件中返回多个元素,而不会污染 DOM。这是一个很棒的工具!