React 中的占位符 Fragment

2020年12月12日#react15

AI 翻譯

這篇文章透過AI由簡體中文翻譯成繁體中文。查看原文

AI 生成的摘要

在React项目中，render方法只能有一个根元素，通常是<div>，然后在其中写入我们的组件。但是在浏览器中查看时，除了我们想要显示的组件外，还会有一个外层的<div>标签包裹，这不美观，而且在调整样式时会有些麻烦。为此，React提供了一个占位符Fragment，可以用来替代根元素<div>，这样在浏览器中就不会显示多余的标签，直接显示组件内容。

在 React 專案中， render 方法只能有一個根元素，一般都是 <div> <div/> ，然後在裡面寫上我們的元件，渲染到瀏覽器一看，除了我們想要顯示的元件，外面還套著一層 div ，如果在寫專案的時候，套了很多層元件，那麼每一層都會多出來一個父級元素 div ，不美觀，而且在調整樣式的時候會有些麻煩

因此， React 提供了一個占位符 Fragment，寫法是：

// index.js

import React, { Component,Fragment } from 'react'

export default class index extends Component {
    render() {
        return (
            <Fragment>
                <h2>hello,wolrd</h2>
            </Fragment>
        )
    }
}

在引入 React 的時候，增加一個屬性 Fragment ，然後 render()方法下唯一的根元素我們用 <Fragment> </Fragment> 來代替，這時候再看瀏覽器，就不會顯示多餘的標籤了，直接顯示 <h2>標籤