html form中多个div,在react里最多只能有几个div

在react里最多只能有几个div

在react的render中，最外层只能有一个组件，但不一定是div，可以是一个react Component，如，也可以是html标签，如

如果返回的是多个平级的react Component，需要用html标签包裹起来，如'

'。

版本15

15以前，render 函数的返回必须有一个根节点，否则报错，为满足这一原则我会使用一个没有任何样式的 div 包裹一下。import React from 'react';

export default function () {

return (

一步 01

一步 02

一步 03

一步 04

);

}

这样的话我们每写一个组件就会有一个不必要的标签，这让我们的代码极其难看！

react 16开始，render函数允许返回数组import React from 'react';

export default function () {

return [

一步 01

,

一步 02

,

一步 03

,

一步 04

];

}

Fragments

Fragments与Vue.js的功能类似，可做不可见的包裹元素。import React from 'react';

export default function () {

return (

一步 01

一步 02

一步 03

一步 04

);

}

Fragments简写形式<>>

简写形式<>>是不是很吊的样子，但目前有些前端工具支持的还不太好，用 create-react-app 创建的项目就不能通过编译。大家使用在线的编辑器体验一下吧。import React from 'react';

export default function () {

return (

<>

一步 01

一步 02

一步 03

一步 04

>

);

}

本文来自React答疑栏目，欢迎学习！