四、【React拓展】Fragment

1、发现问题

  • render 返回的dom结构必须包含一个根标签,这样渲染到页面上就会多一层dom结构

2、解决问题

react 提供了一个 Fragment 标签,可以充当根dom节点,在渲染到页面上不会多渲染一层dom结构

  • 引入 Fragment:import { Fragment } from 'react'
  • 使用 Fragment
import { Fragment } from 'react'

export default function FragmentTest() {
    return (
        <Fragment>
        	{/* 真正要展示的dom,略。。。 */}
        </Fragment>
    )
}
  • 最多可以有一个 key 属性以适用 react 的 diff 算法(因为挂其他的属性就没有任何意义,它根本就不会出现在真是dom层级里面)
  • 如果使用 <>;它不可以挂任何属性!!!

你可能感兴趣的:(React,react.js,javascript,前端,Fragment)