react笔记之渲染列表

 <!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>

posted @ 2022-11-05 20:41 前端导师歌谣阅读(38) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· react笔记之展开笔记

· react项目实战学习笔记-学习40-列表数据请求和渲染

· react学习---jsx小练习(列表渲染)

· 02-列表渲染

· 好客租房41-react组件基础综合案例-渲染列表数据

公告

昵称：前端导师歌谣
园龄： 7年3个月
粉丝： 9
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

前端导师歌谣的博客

微信公众号关注前端小歌谣每日分享前端知识

react笔记之渲染列表

公告

搜索

常用链接

最新随笔

我的标签

积分与排名

随笔分类

随笔档案

相册

阅读排行榜

推荐排行榜

	<!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>

前端导师歌谣的博客

微信公众号关注前端小歌谣 每日分享前端知识

react笔记之渲染列表

公告

搜索

常用链接

最新随笔

我的标签

积分与排名

随笔分类

随笔档案

相册

阅读排行榜

推荐排行榜

微信公众号关注前端小歌谣每日分享前端知识