日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

React里的Fragment標簽的具體使用_React

作者：慢谷 ? 更新時間： 2023-03-27 編程語言

react return里返回多個元素值要有父標簽包裹。

React.Fragment組件能夠在不額外創建 DOM 元素的情況下，讓 render()方法中返回多個元素。相當于空標簽<></>。

<></>包裹多個元素↓：

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標簽↓：

和<></>實現效果一致。

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>包裹多個標簽就會多一層嵌套↓：

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標簽的區別

Fragment標簽支持能接受鍵值或屬性，可以遍歷循環渲染元素

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;

原文鏈接：https://blog.csdn.net/xy_is_fhh/article/details/125479599

欄目分類
最近更新