在react里最多只能有几个div

在react里最多只能有几个div

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

如果返回的是多个平级的react Component，需要用html标签包裹起来，如'<div><A/><B/></div>'。

版本15

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

import React from 'react';
export default function () {
    return (
        <div>
            <div>一步 01</div>
            <div>一步 02</div>
            <div>一步 03</div>
            <div>一步 04</div>
        </div>
    );
}

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

react 16开始，render函数允许返回数组

import React from 'react';
export default function () {
    return [
        <div>一步 01</div>,
        <div>一步 02</div>,
        <div>一步 03</div>,
        <div>一步 04</div>
    ];
}

Fragments

Fragments与Vue.js的功能类似，可做不可见的包裹元素。

import React from 'react';
export default function () {
    return (
        <React.Fragment>
            <div>一步 01</div>
            <div>一步 02</div>
            <div>一步 03</div>
            <div>一步 04</div>
        </React.Fragment>
    );
}

Fragments简写形式<></>

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

import React from 'react';
export default function () {
    return (
        <>
            <div>一步 01</div>
            <div>一步 02</div>
            <div>一步 03</div>
            <div>一步 04</div>
        </>
    );
}

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

以上就是在react里最多只能有几个div的详细内容，更多请关注易知道|edz.cc其它相关文章！