发布于 4年前

React 16.2:Fragments语法的使用

React 16.2最大的变化是新增了fragments特性,fragments语法。

示例:返回一首诗的片段

敬请阅读
<h2>面朝大海,春暖花开</h2>
<p>从明天起,做一个幸福的人</p>
<p>喂马、劈柴,周游世界</p>
<p>...</>

React 16之前的版本

在React 16之前的版本,如果想用组件返回一个子元素列表,我们需要使用div或者span标签把元素列表包装起来。

render() {
  return (
    <div>
      敬请阅读
      <h2>面朝大海,春暖花开</h2>
      <p>从明天起,做一个幸福的人</p>
      <p>喂马、劈柴,周游世界</p>
      <p>...</>
    </div>
  );
}

此方法的缺点是需要使用额外的DOM元素包装。

React 16.0

React 16.0,则新增了数组的方式返回子元素列表。

render() {
 return [
  "敬请阅读",
  <h2>面朝大海,春暖花开</h2>,
  <p>从明天起,做一个幸福的人</p>,
  <p>喂马、劈柴,周游世界</p>,
  <p>...</>
 ];
}

此方式的缺点是:

  1. 文本需要使用引号括起来,如“敬请阅读”。
  2. 子元素之间使用逗号分隔

这和普通的JSX写法有区别。

React 16.2

React 16.2新增了fragments语法来解决上面两种方式的问题。

render() {
  return (
    <Fragment>
      敬请阅读
      <h2>面朝大海,春暖花开</h2>
      <p>从明天起,做一个幸福的人</p>
      <p>喂马、劈柴,周游世界</p>
      <p>...</>
    </Fragment>
  );
}

可以使用空标签<></>替换<Fragment></Fragment>,<></>为<Fragment></Fragment>的语法糖:

render() {
  return (
    <>
      敬请阅读
      <h2>面朝大海,春暖花开</h2>
      <p>从明天起,做一个幸福的人</p>
      <p>喂马、劈柴,周游世界</p>
      <p>...</>
    </>
  );
}

注意:在渲染时,fragment标签是不会添加到DOM里。

Fragment在React 16.2已添加到React对象里。

const Fragment = React.Fragment;
<Fragment>
  <ChildA />
  <ChildB />
  <ChildC />
</Fragment>
©2020 edoou.com   京ICP备16001874号-3