react项目实战学习笔记-学习2-知识点回顾1

最新推荐文章于 2024-07-25 17:22:28 发布

前端歌谣

最新推荐文章于 2024-07-25 17:22:28 发布

阅读量106

点赞数

文章标签： react.js 学习 javascript

本文链接：https://blog.csdn.net/qq_41632427/article/details/126293567

版权

React项目实战-hook+react17-企业案例专栏收录该内容

61 篇文章 0 订阅

订阅专栏

函数组件

import React,{Component} from "react"

function App(){
    return <h2>歌谣</h2>
}

export default App

类组件

import React,{Component, Fragment} from "react"

// function App(){
//     return <h2>歌谣</h2>
// }
class App extends Component{
    state={
        arr:["张三","李四","王五"]
    }
    render(){
        return (
            <>
            <ul>
                <li>
                    {this.state.arr.map((item,index)=>{
                        return(
                            <Fragment key={index}>
                                <li>{item}</li>
                            </Fragment>
                        )
                    })}
                </li>
            </ul>
            </>
        )
    }
}

export default App

函数组件

import React,{Fragment, useState} from "react"

// function App(){
//     return <h2>歌谣</h2>
// }
function App(){
    const [arr,setArr]=useState(["刘备","关于"])
    return (
        <ul>
            {arr.map((item,index)=>{
                return(
                    <Fragment key={index}>
                        <li>{item}</li>
                    </Fragment>
                   
                )
            })}
        </ul>
    )
}

export default App