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

學(xué)無(wú)先后，達(dá)者為師

網(wǎng)站首頁(yè) 編程語(yǔ)言 正文

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

作者：慢谷 ? 更新時(shí)間： 2023-03-27 編程語(yǔ)言

react return里返回多個(gè)元素值要有父標(biāo)簽包裹。

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

<></>包裹多個(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ū)傩裕梢员闅v循環(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;

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

欄目分類
最近更新