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>

版权声明:著作权归作者所有。

相关推荐

Python 3.5拼接列表的新语法

在Python 3.5之前的版本,拼接列表可以有这两种方法:1、列表相加list1 = [1,2,3] list2 = [4,5,6] result = list1 + list2 结果为一个新的列表2、在原来列表上扩展list1 = [1,2,3] list2 = [

React Router 4 表单提交后重定向示例

表单设置fireRedirect为发起从定向的标记,当表单提交后,更新它的值为fireRedirect=true。当fireRedirect为true时,重定向到原来的页面。import React, { Component } from 'react' import { Redirect } from 'react-router' export default class MyForm

在React JSX内部执行循环

这里实现一个表格组件来演示如何在React的JSX内部执行循环。案例假设有一个表格组件,和一个行组件<ObjectRow />,现在需要在表格组件里循环生成行组件<ObjectRow />。是不能直接在jsx里使用for循环,这里介绍两种方法:map函数和立即执行函数。方法一:使用map函数render: function ()&nb

使用Webpack、TypeScript 和React搭建应用

这里简单介绍基于webpack + typescript + react搭建一个应用。初始化项目创建一个空文件夹demo,使用npm在空文件夹初始化项目。npm init npm install --save-dev webpack npm install --save-dev types