React-Fragments

最新推荐文章于 2022-10-09 19:32:24 发布

不止三岁

最新推荐文章于 2022-10-09 19:32:24 发布

阅读量172

点赞数

分类专栏： React 前端 JavaScript

本文链接：https://blog.csdn.net/YYece/article/details/102467144

版权

前端同时被 3 个专栏收录

29 篇文章 1 订阅

订阅专栏

React

21 篇文章 0 订阅

订阅专栏

JavaScript

11 篇文章 0 订阅

订阅专栏

作用

减少不必要的节点嵌套

react常常一个组件返回多个组件，fragments允许将子元素分组，而不用占用多个DOM节点

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

还可以使用新型的短语法来书写，但是可能存在编辑器无法识别的情况

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

短语法不支持任何属性

解决的问题

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

上述代码中 <Columns /> 需要返回多个<td>,但如果返回的父元素是<div>则<table>元素无效，

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

使用Fragment可以解决这个问题

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

属性

目前 React.Fragment 只有 key 一个属性，不能加样式和方法

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>
  );
}