react教程，render的几种返回值写法，Fragment的基本概念

我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

本文讨论react组件里面render的返回值的几种写法，非常容易理解。为了凑篇幅，再加上一个Fragment基本概念的理解。

苏南大叔的程序如此灵动博客，记录苏南大叔的代码理解。测试环境：create-react-app@5.0.1，react@18.2.0，react-dom@18.2.0，node@16.14.2。

Fragment概念

因为react的render返回值，强制要包裹在一个节点里面。一般都用个<div></div>来包裹，但是这个会生成个真实的节点。所以，就出现了如下两个标签：

<React.Fragment></React.Fragment>

<></>

两者是基本上一致的，区别就在于<React.Fragment>可以再添加额外属性（好像也用不到）。比如：

<React.Fragment key=''>

返回list

const Test1 = () => {
  return [
    <p key='1'>sunan</p>,
    <p key='2'>sunan大叔</p>,
    <p key='3'>苏南大叔</p>
  ]
}

这里返回的是个数组，[,,,]。注意：","是不体现在最终的代码里面的，仅仅是数组的分割。注意需要添加key属性，否则报错。这个类似的情况，在以前的文章里面是多次提及的，是为了做dom对比而设置的。

使用<></>

const Test2 = () => {
  return <>
    <p>sunan,</p>
  </>
}

使用React.Fragment

const Test3 = () => {
  return <React.Fragment key="a">
    <p>sunan大叔,</p>
  </React.Fragment>
}

不省略()

const Test4 = () => {
    return (
        <>
            <p>苏南大叔,</p>
        </>
    )
}

使用()的话，内部dom的写法就可以换行了。不用必须紧接着return写。大概效果就这样。

直接写Fragment

那么，就需要import一下Fragment了。

import React,{Fragment} from "react";
const Test5 = () => {
    return (
        <Fragment key="a">
            <p>sunan大叔,Fragment</p>
        </Fragment>
    )
}

完整代码

import React,{Fragment} from "react";

function App() {
    return (
        <div className="App">
            <Test1 />
            <Test2 />
            <Test3 />
            <Test4 />
            <Test5 />
        </div>
    );
}
export default App;

const Test1 = () => {
    return [
        <p key='1'>sunan</p>,
        <p key='2'>sunan大叔</p>,
        <p key='3'>苏南大叔</p>
    ]
}

const Test2 = () => {
    return <>
        <p>sunan,</p>
    </>
}

const Test3 = () => {
    return <React.Fragment key="a">
        <p>sunan大叔,</p>
    </React.Fragment>
}

const Test4 = () => {
    return (
        <>
            <p>苏南大叔,</p>
        </>
    )
}

const Test5 = () => {
    return (
        <Fragment key="a">
            <p>sunan大叔,Fragment</p>
        </Fragment>
    )
}

相关链接

• https://newsn.net/say/react-createref.html
• https://newsn.net/say/react-state.html
• https://newsn.net/say/react-memo.html
• https://newsn.net/say/react-bind.html
• https://newsn.net/say/react-pure-component.html
• https://newsn.net/say/create-react-app.html

结束语

更多react相关经验文章，请点击：

• https://newsn.net/tag/react/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。