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

學無先后，達者為師

網站首頁 編程語言 正文

React淺析Fragments使用方法_React

作者：碼農小菲 ? 更新時間： 2022-12-30 編程語言

概述

  • 可以將子列表分組，而無需向DOM添加額外節點
  • 簡單理解：空標簽
  • <React.Fragment></React.Fragment> 或 <></>
render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  )
}

動機

  • 以下面的代碼為例，如果Columns組件返回多個td元素才能實現效果，但是如果我們在Columns組件中使用了div父元素，則會使td元素失效。Fragment則可以解決這個問題。
//table.js
const Table = () => {
  render() {
    return (
      <table>
        <tr>
          <Columns />
        </tr>
      </table>
    )
  }
}
//columns.js
const Columns = () => {
 render() {
    return (
      <div>
        <td>Hello</td>
        <td>World</td>
      </div>
    )
  }
}
//以上代碼輸出：
<table>
  <tr>
    <div>
      <td>Hello</td>
      <td>World</td>
    </div>
  </tr>
</table>
//此時 td 是失效的，可以使用Fragemengt解決這個問題
//用法：
//columns.js
const Columns = () => {
 render() {
    return (
      <React.Fragment>
        <td>Hello</td>
        <td>World</td>
      </React.Fragment>
    )
  }
}
//通過上面的方法我們就可以正確的輸出table啦：
<table>
  <tr>
    <td>Hello</td>
    <td>World</td>
  </tr>
</table>

短語法

  • 可以使用一種新的，且更簡短的類似空標簽的語法來聲明 Fragments
  • <> </>
  • 不支持 key 或屬性
const Cloumns = () => {
render() {
    return (
      <>
        <td>Hello</td>
        <td>World</td>
      </>
    )
  }
}

帶key 的Fragments

  • 使用顯式 <React.Fragment> 語法聲明的片段可能具有 key
  • key 是唯一可以傳遞給 Fragment 的屬性
function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        // 沒有`key`，React 會發出一個關鍵警告
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  )
}

原文鏈接：https://blog.csdn.net/xbczrz/article/details/128093704

欄目分類
最近更新