React里的Fragment標(biāo)簽的具體使用

更新時(shí)間：2023年01月31日 09:46:07 作者：慢谷

本文主要介紹了React里的Fragment標(biāo)簽的具體使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

<></>包裹多個(gè)元素↓：

import React, { Component, Fragment } from "react";
import "./App.css";
 
class App extends Component {
  render() {
    return (
      <>
        <div>
          <input />
          <button>按鈕</button>
        </div>
        <ul>
          <li>哈</li>
          <li>咯</li>
        </ul>
      </>
    );
  }
}
 
export default App;

使用Fragment標(biāo)簽↓：

和<></>實(shí)現(xiàn)效果一致。

import React, { Component, Fragment } from "react";
import "./App.css";
 
class App extends Component {
  render() {
    return (
      <Fragment>
        <div>
          <input />
          <button>按鈕</button>
        </div>
        <ul>
          <li>哈</li>
          <li>咯</li>
        </ul>
      </Fragment>
    );
  }
}
 
export default App;

<React.Fragment>就不用在頭部引入了↓：

import React, { Component } from "react";
import "./App.css";
 
class App extends Component {
  render() {
    return (
      <React.Fragment>
        <div>
          <input />
          <button>按鈕</button>
        </div>
        <ul>
          <li>哈</li>
          <li>咯</li>
        </ul>
      </React.Fragment>
    );
  }
}
 
export default App;

使用<div>包裹多個(gè)標(biāo)簽就會(huì)多一層嵌套↓：

import React, { Component, Fragment } from "react";
import "./App.css";
 
class App extends Component {
  render() {
    return (
      <div>
        <div>
          <input />
          <button>按鈕</button>
        </div>
        <ul>
          <li>哈</li>
          <li>咯</li>
        </ul>
      </div>
    );
  }
}
 
export default App;

<></>和Fragment標(biāo)簽的區(qū)別

Fragment標(biāo)簽支持能接受鍵值或?qū)傩?，可以遍歷循環(huán)渲染元素

import React, { Component } from "react";
import "./App.css";
 
const list = [
  { id: 0, name: "鳳凰火", description: "最肉" },
  { id: 1, name: "彼岸花", description: "花花" },
];
class App extends Component {
  render() {
    return list.map((item) => (
      <React.Fragment key={item.id}>
        <li>
          {item.name}是{item.description}
        </li>
      </React.Fragment>
    ));
  }
}
 
export default App;