Placeholder Fragment in React

Dec 12, 2020#react15

AI Translation

This post is translated from Chinese into English through AI.View Original

AI-generated summary

In React, the render method can only have one root element, usually a div. However, this can result in extra div elements wrapping the desired components, which can be visually unappealing and inconvenient for styling adjustments. To solve this issue, React provides a placeholder called Fragment, which can be used as the root element instead of a div. By using Fragment, the extra wrapping div elements are eliminated, resulting in a cleaner and more efficient code structure.

In React projects, the render method can only have one root element, usually <div> <div/>, and then we write our components inside it. When rendered in the browser, in addition to the components we want to display, there is also an extra layer of div wrapping them. If we have nested components in our project, each layer will have an additional parent element div, which is not aesthetically pleasing and can be troublesome when adjusting styles.

Therefore, React provides a placeholder Fragment, which is written as:

// index.js

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

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

When importing React, add the attribute Fragment, and then use <Fragment> </Fragment> as the only root element in the render() method. Now, when you look at the browser, there will be no extra tags displayed, only the <h2> tag.