5

#yyds干货盘点 歌谣学前端之React中渲染列表

 1 year ago
source link: https://blog.51cto.com/u_14476028/6047019
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

#yyds干货盘点 歌谣学前端之React中渲染列表

精选 原创

前端歌谣 2023-02-09 14:31:27 ©著作权

文章标签 html 数组 i++ 文章分类 JavaScript 前端开发 yyds干货盘点 阅读数156

我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 微信公众号前端小歌谣 关注公众号带你进入前端学习交流群
#yyds干货盘点 歌谣学前端之React中渲染列表_html
/*
        <ul>
             <li>孙悟空</li>
             <li>猪八戒</li>
            ...
        </ul>

[<li>孙悟空</li>, <li>猪八戒</li>, <li>沙和尚</li>]
    * */

// const arr = [];

// 遍历data
    // for(let i=0; i<data.length; i++){
    //     arr.push(<li>{data[i]}</li>);
    // }

// const arr = data.map(item => <li>{item}</li>);


    // 将arr渲染为一个列表在网页中显示
    // jsx中会自动将数组中的元素在页面中显示
    // const list = <ul>{arr}</ul>;
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>渲染列表</title>
    <script src="script/react.development.js"></script>
    <script src="script/react-dom.development.js"></script>
    <!-- 引入babel -->
    <script src="script/babel.min.js"></script>
</head>
<body>
<div id="root"></div>

<script type="text/babel">

const name = '孙悟空';
    const lang = 'cn';

/*
    *   {} 只能用来放js表达式，而不能放语句（if for）
    *       在语句中是可以去操作JSX
    * */
    // const div = <div>Hello {name}</div>;

let div;

if(lang === 'en'){
        div = <div>hello {name}</div>;
    }else if(lang === 'cn'){
        div = <div>你好 {name}</div>;
    }

const data = ['孙悟空', '猪八戒', '沙和尚'];

/*
        <ul>
             <li>孙悟空</li>
             <li>猪八戒</li>
            ...
        </ul>

[<li>孙悟空</li>, <li>猪八戒</li>, <li>沙和尚</li>]
    * */

// const arr = [];

// 遍历data
    // for(let i=0; i<data.length; i++){
    //     arr.push(<li>{data[i]}</li>);
    // }

// const arr = data.map(item => <li>{item}</li>);


    // 将arr渲染为一个列表在网页中显示
    // jsx中会自动将数组中的元素在页面中显示
    // const list = <ul>{arr}</ul>;

const list = <ul>{data.map(item => <li>{item}</li>)}</ul>;

const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(list);

</script>
</body>
</html>

            

        
        
        
    

    

        
  • 
                
                    
                    1赞
                
            
    • 
            
  • 
                
                    
                    收藏
                
            
    • 
            
  • 
                
                    
                    评论
                
            
    • 
            
  • 
                
                    
                    分享
                
            
    • 
                            
  • 
                    
                        
                        举报
                    
                
    • 
                    

    
    


        

        

            

                report
            

        

    







        
Recommend

        



                

    
About Joyk

    
 





Aggregate valuable and interesting links.

Joyk means Joy of geeK