对React进行从基础开始的总结【29】【碎片】

2 年 ago

清, 宇

1 minute

import React from "react";

const SampleComponent : React.FC = () : JSX.Element =>{
    return (
        <div>Mars</div>
        <div>quai</div>
    )
}

//[Error] JSX expressions must have one parent element.

如果在React中想要作为组件返回多个元素，不能直接按照上述方式书写。为了避免这个错误，在放置多个元素时必须将它们放在一个标签内。

在React中，除了可以使用

标签来包裹，还专门为这种情况准备了Fragment标签。

如果想要在JSX中返回多个标签时，可以使用无功能的Fragment标签。

import React from "react";

const SampleComponent = ()  =>{
    return (
        <React.Fragment>
            <div>Mars</div>
             <div>quai</div>
        </React.Fragment>
    )
}

在使用map()函数时，除了作为组件的返回值之外，还经常用于返回多个元素的情况。

const SampleComponent = ()  =>{
    return (
        <React.Fragment>
            {sampleArray.map((i, key) => {
                return (
                    <React.Fragment key={key}>
                        <div>Hello!!</div>
                        <div>{i}</div>
                    </React.Fragment>
                )
            })}
        </React.Fragment>
    )
}

在map()函数中返回的元素中，将key作为props传递给了Fragment。
key是Fragment唯一能够接收的props。

const SampleComponent = ()  =>{
    return (
        <>
            {sampleArray.map((i, key) => {
                return (
                    <React.Fragment key={key}>
                        <div>Hello!!</div>
                        <div>{i}</div>
                    </React.Fragment>
                )
            })}
        </>
    )
}

Fragment 可以写成一个空标签 <>。

※ 在传递密钥时，请注意不能使用空标签。

优点：选择器的指定

在HTML渲染时，Fragment是一个不存在的临时方法，可以在使用Flexbox或Grid等CSS样式时，无损地利用其结构。

参考网站

【React】详细解释了Fragment的使用方法和优点