React brief analysis of how to use Fragments

Overview

Sublists can be grouped without adding additional nodes to the DOM
Simple understanding: empty tags
<></> or <></>

render() {
  return (
    <>
      <ChildA />
      <ChildB />
      <ChildC />
    </>
  )
}

motivation

The following code is an example. If the Columns component returns multiple td elements to achieve the effect, but if we use the div parent element in the Columns component, the td element will be invalidated. Fragment can solve this problem.

//
const Table = () =&gt; {
  render() {
    return (
      &lt;table&gt;
        &lt;tr&gt;
          &lt;Columns /&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
    )
  }
}
//
const Columns = () =&gt; {
 render() {
    return (
      &lt;div&gt;
        &lt;td&gt;Hello&lt;/td&gt;
        &lt;td&gt;World&lt;/td&gt;
      &lt;/div&gt;
    )
  }
}
//The above code output:&lt;table&gt;
  &lt;tr&gt;
    &lt;div&gt;
      &lt;td&gt;Hello&lt;/td&gt;
      &lt;td&gt;World&lt;/td&gt;
    &lt;/div&gt;
  &lt;/tr&gt;
&lt;/table&gt;
// At this time td is invalid, you can use Fragemengt to solve this problem//usage://
const Columns = () =&gt; {
 render() {
    return (
      &lt;&gt;
        &lt;td&gt;Hello&lt;/td&gt;
        &lt;td&gt;World&lt;/td&gt;
      &lt;/&gt;
    )
  }
}
// Through the above method, we can output the table correctly:&lt;table&gt;
  &lt;tr&gt;
    &lt;td&gt;Hello&lt;/td&gt;
    &lt;td&gt;World&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;

Phrase grammar

A new and shorter, empty tag-like syntax can be used to declare Fragments
<> </>
Key or attributes are not supported

const Cloumns = () => {
render() {
    return (
      <>
        <td>Hello</td>
        <td>World</td>
      </>
    )
  }
}

Fragments with key

Fragments declared using explicit <> syntax may have keys
key is the only property that can be passed to a Fragment

function Glossary(props) {
  return (
    &lt;dl&gt;
      {(item =&gt; (
        // Without `key`, React will issue a key warning        &lt; key={}&gt;
          &lt;dt&gt;{}&lt;/dt&gt;
          &lt;dd&gt;{}&lt;/dd&gt;
        &lt;/&gt;
      ))}
    &lt;/dl&gt;
  )
}

This is the end of this article about React's brief analysis of how to use Fragments. For more related React Fragments, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!