React学习：片段(fragments) 与插槽(Portals)

最新推荐文章于 2024-07-29 21:59:15 发布

白小宇

最新推荐文章于 2024-07-29 21:59:15 发布

阅读量6.1k

点赞数

分类专栏： web前端 React React学习文章标签： react fragments portals

本文链接：https://blog.csdn.net/b954960630/article/details/80200905

版权

本文详细介绍了React中的片段(Fragments)和插槽(Portal)。片段允许你在不添加额外DOM元素的情况下分组子组件，简化渲染。简写语法方便了片段的使用。插槽(Portal)则提供了将React组件渲染到页面任意位置的能力，常用于对话框、提示框等。文中通过实例展示了如何使用和事件冒泡的特点。

摘要由CSDN通过智能技术生成

一、片段(fragments)

片段(fragments) 可以让你将子元素列表添加到一个分组中，并且不会在DOM中增加额外节点。

1、片段长什么样？

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

2、为什么会用片段？

看下面例子：

class Columns extends React.Component {
   
  render() {
    return (
      <div>
        <td>Hello</td>
        <td>World</td>
      </div>
    );
  }
}
class Table extends React.Component {
   
  render() {
    return (
      <table>
        <tr>
          <Columns />
        </tr>
      </table>
    );
  }
}

为了渲染有效的 HTML ， <Columns /> 需要返回多个<td> 元素。如果 <Columns /> 的 render() 函数里面使用一个父级 div ，那么最终生成的 HTML 将是无效的，像下面这样：
在 <Table /> 组件中的输出结果：

<table>
  <tr>
    <div><!--增加了多余的div标签，且让html无效-->
      <td>Hello</td>
      <td>World</td>
    </div>
  </tr>
</table>

所以，我们介绍 Fragment。

3、使用片段
我们使用片段改写上面例子。

class Columns extends React.Component {
   
  render() {
    return (
      <React.Fragment>
        <td>Hello</td>
        <td>World</td>
      </React.Fragment>
    );
  }
}
class Table extends React.Component {
   
  render() {
    return (
      <table>
        <tr>
          <Columns />
        </tr>