React——Fragments特性

  1. 云栖社区>
  2. 博客>
  3. 正文

React——Fragments特性

溜达向日葵 2018-08-01 16:06:37 浏览841
展开阅读全文

为什么要用Fragments

在我们使用React开发组件的时候,每个React组件都必须返回一个根元素。例如下面这样:

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

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

在正常的HTML行文中,<tr>标签与<td>标签之间的<div>标签是不应该存在的。

虽然在这个小小的例子中,我们可以将tr标签移入到Columns中去解决这个问题,但是在错综复杂的业务层级代码中,我们经常会遇到希望一个组件返回多个并列标签的情况。

为了解决这个问题,React在16.x版本新推出了一个Fragments特性——组件碎片化。Fragments的使用方法非常简单,我们将Column组件稍作改造即可:

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

这样,在最终渲染成Dom后,并不会出现任何与HTML行文不符的标签。

简写与注意事项

除了React.Fragment这样的写法,React还推荐使用更加明了的简短写法:

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

需要注意的是:这样的写法不支持传递任何参数,而且某些编译器或者编译工具并不支持这种写法

在队列中使用

一个React元素除了直接写成一个组件,也可以在队列中返回。Fragment标签使用到队列中同样也要使用key属性来标记队列的位置

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}

网友评论

登录后评论
0/500
评论
溜达向日葵
+ 关注