目录

if+组件

函数组件/UI组件/简单组件

类组件和函数组件整合

函数组件+&&运算

遍历

map遍历数据

无序列表

key的唯一性

---

if+组件

函数组件/UI组件/简单组件

function Welcome(props){

        return

Welcome back

}

function Login(props){

        return

Please Login First

}

function Greeting(props){

        const isLogin = props.isLogin

        if(isLogin){

                return

        }else{

                return

        }

}

let vDOM = //Welcome back

// let vDOM = //Please Login First

ReactDOM.render(vDOM,document.getElementById("app"))

类组件和函数组件整合

function LoginButton(props){

        return Login

}

function LogoutButton(props){

        console.log(props)

        return Logout

}

function LoginButton(props){

        return Login

}

class App extends React.Compontent{

        state = {isLogin:false} // 默认未登录

        //登录行为

        handleLogin=()=>{

                this.setState({

                        isLogin:true

                })

        }

        //退出行为

        handleLogout=()=>{

                this.setState({

                        isLogin:true

                })

        }

        render(){

                //添加按钮：登录状态时,显示退出；未登录状态时,显示登陆

                //写法1：(代码重复率高)

                const isLogin = this.state.isLogin;

                if(isLogin){

                        return(

                               

                                       

                                       

                               

                        )

                }else{

                        return(

                               

                                       

                                       

                               

                        )

                }

                return ( )

        //写法2：(三元表达式方式)

                return (

                       

                               

                                { isLogin? : }

                       

                )

        //采用写法二,给按钮绑定行为

                return (

                       

                               

                                {

                                        isLogin ?

                                                 :

                                                

                                }

                       

                )

        }

函数组件+&&运算

const unReadEmail = ["news1","news2","news3"]

//const unReadEmail = [] 

写法3：(&&与运算方式)

(true && express =>返回express ; false && express =>返回false)

function Mailbox(props){

        let unReadEmail = props.unReadEmail

        rerurn(

               

                       

Mail Box List

                        {

                                unReadEmail.length>0

                                &&

                                

you have {unReadEmail.length} unread email

                        }

               

        )

}

ReactDOM.render(

        ,document.getElementById("app"))

遍历

//map遍历数据

let source = [1,2,3,4,5]

let double = source.map(item=>item*2)

console.log(double) //输出[2,4,6,8,10]

//无序列表

let source = [1,2,3,4,5]

let listItems = source.map(item=>

{item*2}

) //

自动支持展开

//列表容器

function ListContainer(){

        return(

               

                        {listItems}

               

        )

}

 //封装列表容器，支持动态传参

function ListContainer(props){

        let {data}= props

        let listItems = source.map(item=>

{item*2}

)

        return(

               

                        {listItems}

               

        )

}

//报警告：Warning:Each child in a list should have a unique "key"prop

//注意：元素key就近数据源

function ListContainer(props){

        let {data}= props

        let listItems = source.map(item=>

key={item}>{item*2}

)

        //key一般比较复杂，需要封装成独立的组件

        return(

               

                        {listItems}

               

        )

}

//封装组件形式的key,消除警告

function ListItem(props){

        let {value} = props

        return(

                

{value*2}

        )

}

function ListContainer(props){

        let {data}= props

        let listItems = data.map(item=>} value = {item}/>)

        //兄弟节点key是唯一的；毫无相关可以不唯一

        return(

               

                        {listItems}

               

        )

}

key的唯一性

在兄弟节点之间必须唯一，在全局下可以不唯一；

function Content(props){

        let {id,title,content} = props

        return(

               

                       

{title}

                       

{content}

               

        )

}

function Title(props){

        let {id,title} = props

        return(

               

{title}

        )

}

function Blogs(props){

        let {posts} = props

        let sidebar = (

               

                        {

                        post.map(item=> key = {item.id} title = {item.title}/>)

                        }

                

        )

        let content = posts.map(item=>{

                key={item.id} title = {item.title} content = {item.content}/>

        })

        //content和sidebar在不同节点下,不属于兄弟节点,key值可以相同

        return(

               

                       

{sidebar}

                       

{content}

               

        )

}

const posts = [ // 模拟数据

        {id:1,title:"title1",content:"内容1"},

        {id:2,title:"title2",content:"内容2"},

]

ReactDOM.render(,document.getElementById("app"))