react（四）-- render

最新推荐文章于 2024-05-08 09:34:06 发布

balance~~

最新推荐文章于 2024-05-08 09:34:06 发布

阅读量276

点赞数 1

文章标签： react.js javascript html5

本文链接：https://blog.csdn.net/m0_48942526/article/details/120667434

版权

component-render

if + 组件
(1)函数组件 => 函数组件也叫UI组件、简单组件

<script type="text/babel">
    //if + 组件
    //(1)函数组件 => 函数组件也叫UI组件、简单组件
    function Welcome(props){
        return <h1>Welcome back</h1>
    }
    function Login(props){
        return <h1>Please Login First</h1>
    }
    function Greeting(props){
        const isLogin = props.isLogin
        console.log(isLogin);
        if(isLogin){
            return <Welcome />
        }else{
            return <Login />
        }
    }
    var vdom = <Greeting isLogin = {true}/>
    ReactDOM.render(vdom,document.getElementById("app"));
</script>

在这里插入图片描述
(2)类组件和函数组件整合 + if逻辑
1）方式一：

	<script type="text/babel">
	    //if + 组件
	    //(1)函数组件 => 函数组件也叫UI组件、简单组件
	    function Welcome(props){
	        return <h1>Welcome back</h1>
	    }
	    function Login(props){
	        return <h1>Please Login First</h1>
	    }
	    function Greeting(props){
	        const isLogin = props.isLogin
	        console.log(isLogin);
	        if(isLogin){
	            return <Welcome />
	        }else{
	            return <Login />
	        }
	    }
	    function LoginButton(props){
	        return <button>Login</button>
	    }
	    function LogoutButton(props){
	        return <button>Logout</button>
	    }
	    class LoginControl extends React.Component{
	        state = {isLogin:false} //默认没登录
	        render(){
	            //添加按钮：登录了显示退出按钮，未登录显示登录按钮
	            const isLogin = this.state.isLogin
	            if(isLogin){
	                return (
	                    <div>
	                        <Greeting isLogin={this.state.isLogin} />
	                        <LogoutButton />
	                    </div>
	                )
	            }else{
	                return (
	                    <div>
	                        <Greeting isLogin={this.state.isLogin} />
	                        <LoginButton />
	                    </div>
	                )
	            }
	        }
	    }
	    var vdom = <LoginControl />
	    ReactDOM.render(vdom,document.getElementById("app"));
	</script>

在这里插入图片描述

2）方式二（优化）：

	class LoginControl extends React.Component{
        state = {isLogin:false} //默认没登录
        render(){
            //添加按钮：登录了显示退出按钮，未登录显示登录按钮
            const isLogin = this.state.isLogin
            let button
            if(isLogin){
                button = <LogoutButton />
            }else{
                button = < LoginButton/>
            }
            return (
                    <div>
                        <Greeting isLogin={this.state.isLogin} />
                        <LoginButton />
                    </div>
                )
        }
    }

3）方式三（再优化 - 三元运算）：

class LoginControl extends React.Component{
            state = {isLogin:false} //默认没登录
            render(){
                //添加按钮：登录了显示退出按钮，未登录显示登录按钮
                
                const isLogin = this.state.isLogin
                return (
                    <div>
                        <Greeting isLogin={this.state.isLogin} />  
                        {
                            isLogin?<LogoutButton /> : <LoginButton />
                        }  
                    </div>
                )
            }
        }

4）完整版：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 挂载容器 -->
    <div id="app"></div>
    <!-- 引入库 -->
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>

    <script type="text/babel">
        //if + 组件
        //(1)函数组件 => 函数组件也叫UI组件、简单组件
        function Welcome(props){
            return <h1>Welcome back</h1>
        }
        function Login(props){
            return <h1>Please Login First</h1>
        }
        function Greeting(props){
            const isLogin = props.isLogin
            if(isLogin){
                return <Welcome />
            }else{
                return <Login />
            }
        }
        function LoginButton(props){
            console.log(props.login);
            console.log(props);
            return <button onClick={props.login}>Login</button>
        }
        function LogoutButton(props){
            return <button onClick={props.logout}>Logout</button>
        }
        class LoginControl extends React.Component{
            state = {isLogin:false} //默认没登录
            //登录行为
            handleLogin = ()=>{
                this.setState({
                    isLogin:true
                })
            }
            handleLogout = ()=>{
                this.setState({
                    isLogin:false
                })
            }
            render(){
                //添加按钮：登录了显示退出按钮，未登录显示登录按钮
                const isLogin = this.state.isLogin
                return (
                    <div>
                        <Greeting isLogin={this.state.isLogin} />  
                        {
                            isLogin?<LogoutButton logout = {this.handleLogout}/> : <LoginButton login = {this.handleLogin}/>
                        }  
                    </div>
                )
                
            }
        }
        var vdom = <LoginControl />
        ReactDOM.render(vdom,document.getElementById("app"));
    </script>
</body>
</html>

需求：模仿邮箱，显示有多少个邮件未读（&&运算）
– js中：true && expression 返回expression ； false && expression 返回false

	<script type="text/babel">
        const unReadEmail = ['news1','news2','news3']
        function Mailbox(props){
            let unReadEmail = props.unReadEmail
            return (
                <div>
                    <h1>Mail Box List</h1>
                    {
                        unReadEmail.length>0 && <h2>you have {unReadEmail.length} unred email</h2>
                    }
                </div>
            )
        }
        ReactDOM.render(<Mailbox unReadEmail={unReadEmail} />,document.getElementById("app"));
    </script>

在这里插入图片描述

遍历数据
(1) map()

<script type="text/babel">
        //map
        let source = [1,2,3,4,5]
        let double = source.map(item=>item*2)
        console.log(double);
    </script>

在这里插入图片描述
(2)在ul中渲染

	<script type="text/babel">
        let source = [1,2,3,4,5]
        let listItems = source.map(item=><li>{item*2}</li>)
        //列表容器
        function ListContainer(){
            return (
                <ul>
                    {listItems}    
                </ul>
            )
        }
        ReactDOM.render(<ListContainer />,document.getElementById("app"));
    </script>

在这里插入图片描述
(3)封装一个列表容器，支持动态传参

	<script type="text/babel">
        let source = [1,2,3,4,5]
        function ListContainer(props){
            //let source = props.data
            let {data} = props
            let listItems = data.map(item=><li>{item*2}</li>)
            return (
                <ul>
                    {listItems}    
                </ul>
            )
        }
        ReactDOM.render(<ListContainer data={source}/>,document.getElementById("app"));
    </script>

在这里插入图片描述

注意：元素key就近数组（数据源）

 <script type="text/babel">
        let source = [1,2,3,4,5]
        function ListContainer(props){
            //let source = props.data
            let {data} = props
            let listItems = data.map(item=><li key={item}>{item*2}</li>)
            return (
                <ul>
                    {listItems}    
                </ul>
            )
        }
        ReactDOM.render(<ListContainer data={source}/>,document.getElementById("app"));
    </script>

在这里插入图片描述

<script type="text/babel">
        let source = [1,2,3,4,5]
        //注意：元素key就近数组（数据源）
        function ListItem (props){
            let {value} = props
            return (
                <li>{value*2}</li>
            )
        }

        function ListContainer(props){
            //let source = props.data
            let {data} = props
            let listItems = data.map(item=><ListItem key={item} value={item} />)
            return (
                <ul>
                    {listItems}    
                </ul>
            )
        }
        ReactDOM.render(<ListContainer data={source}/>,document.getElementById("app"));
    </script>

在这里插入图片描述

key具有唯一性
key在兄弟节点之间必须唯一
全局下可以不唯一

	<script type="text/babel">
        function Content (props){
            let {title,content} = props
            return(
                <div>
                    <h3>{title}</h3>
                    <h3>{content}</h3>
                </div>
            )
        }

        function Title(props){
            let {title} = props
            return (
                <li>{title}</li>
            )
        }

        function Blogs(props){
            let {posts} = props
            let sidebar = (
                <ul>
                    {
                        posts.map(item=><Title key={item.id} title={item.title}/>) 
                    }                    
                </ul>
            )
            let content = posts.map(item=><Content key={item.id} title={item.title} content={item.content}/>)
            return (
                <div>
                    <div>{sidebar}</div>    
                    <div>{content}</div>
                </div>
            )
        }

        const posts = [
            {id:1,title:'title1',content:'welcome to habin helongjiang1'},
            {id:2,title:'title2',content:'welcome to habin helongjiang2'},
        ]

        ReactDOM.render(<Blogs posts={posts}/>,document.getElementById("app"));
    </script>

title 和 content的key是相同的，但不影响
title1 与 title2 / content1 与 content2 兄弟节点之间的key不同

balance~~

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react（四）-- render

component-renderif + 组件(1)函数组件 => 函数组件也叫UI组件、简单组件         (2)<script type="text/babel"> //if + 组件 //(1)函数组件 => 函数组件也叫UI组件、简单组件 function Welcome(props){ return <h1>Welc
复制链接

扫一扫