[React] Use React Fragments to make your DOM tree cleaner

In this lesson, we will look at Fragments and how they are useful in achieving a cleaner DOM structure without additional empty div elements.

const HeaderFooter = () => {

  return (

    <div>

      <div>

        header

      </div>

      <div>

        footer

      </div>

    </div>

  );

}

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

import {render} from 'react-dom'

const HeaderFooter = () => {

  return (

    <Fragement>

      <div>

        header

      </div>

      <div>

        footer

      </div>

    </Fragment>

  );

}

export default class App extends Component {

  render() {

    return (

      <div>

        <HeaderFooter />

      </div>

    );

  }

}

render(<App />, document.getElementById('root'));

巴特西

[React] Use React Fragments to make your DOM tree cleaner

最新文章

热门文章