当前位置：首页 > news >正文

React方向：react的基本语法-数据渲染

news 来源：原创 2025/5/19 5:26:21

1、安装包(js库)

yarn add babel-standalone react react-dom

示例图.png

2、通过依赖包导入js库文件

<script src="../node_modules/babel-standalone/babel.js"></script>
<script src="../node_modules/react/umd/react.development.js"></script>
<script src="../node_modules/react-dom/umd/react-dom.development.js"></script>

3、开始react的基本语法的使用

- 1.数据的定义

    /* 数据定义 */const data ={state:'关闭'}/* 数据的使用 */{data.state}

- 2.元素节点的样式添加

方法一：在内部使用style去添加

    const ele = (<div className="demo" data-id="自定义id属性" title="标题" style={{color:'red',fontSize:'24px'}}><p>tab栏标签是否打开{data.state}</p></div>)ReactDOM.render(ele,document.querySelector('#root'))

示例图.png

方法二：将style在外部定义个变量，然后作为变量引入元素中

<script type="text/babel">/* 数据定义 */const data ={state:'关闭'}/* 样式的定义 */const pStyle = {color:'gold',fontSize: '28px',border:'1px solid #ccc'}const ele = (<div className="demo" data-id="自定义id属性" title="标题" style={pStyle}><p>tab栏标签是否打开<span style={{color:'blue'}}>{data.state}</span></p></div>)ReactDOM.render(ele,document.querySelector('#root'))
</script>

示例图.png

- 3.代码的注释

在react中注释代码时，不能直接使用//去单行注释，需要先使用{ }包裹起来，再去单行注释或者多行注释

    const ele = (<div className="demo" data-id="自定义id属性" title="标题" style={pStyle}><p>tab栏标签是否打开{/* <span style={{color: 'blue'}}>{data.state}</span> */}</p></div>)ReactDOM.render(ele,document.querySelector('#root'))

上面是将span标签注释了，检查元素：

示例图.png

可以看到只有一个p标签，并没有span标签了。

- 4.不同数据类型使用插值去渲染

字符串

    /* 字符串 */const str = 'xiaochen';/* 插入到标签内 */const ele = (<div className="demo">{/*插入字符串*/}<h5 style={{color:'orange'}}>{str}</h5></div>)ReactDOM.render(ele,document.querySelector('#root'))

数组

    /* 数组 */const arr = [1,2,3,4,5];/* 插入到标签内 */const ele = (<div className="demo">{/* 插入数组 */}<h5 style={{color:'red'}}>{arr}</h5></div>)ReactDOM.render(ele,document.querySelector('#root'))

注意：{ } 插值不能插入对象！

    /* 对象 */const obj = {name:'xiao',age:10}/* 插入到标签内 */const ele = (<div className="demo">{/* 插入对象 */}<h5 style={{color:'green'}}>{obj}</h5></div>)ReactDOM.render(ele,document.querySelector('#root'))

注意！在使用{ }时，不可以使用这个插值去渲染对象数据，会出现报错

image.png

4、遍历数据列表

使用基本的插值去遍历，注意：在react中，{ }表达式是必须要有返回值的，否则会出现错误。

<script type="text/babel">
/* 新闻列表数据 */
const news = [{id:'1001',title:'俄战斗机器人首次展示自动射击：靶标上打出“乌拉”',content:'报道称，该基金会发布视频，展示在操作员控制武器的条件下发现目标和射击，对静态和移动目标进行自动射击，还展示了在靶场内自动机动行驶。在视频结尾，这款战斗机器人利用自动武器连续射击，在靶标上打出了“乌拉”一词。'},{id:'1002',title:'美媒：海军建设用力过猛 上个十年初造舰存严重问题',content:'美海军的“濒海战斗舰”出现了推进故障；由于弹药昂贵，朱姆沃尔特级隐身驱逐舰上的舰炮“无弹可用”；最新福特级航母的电磁弹射系统存在问题。'},{id:'1003',title:'加拿大军官号召士兵不要接种新冠疫苗被指控叛乱',content:'据“今日俄罗斯”25日报道，拉迪斯拉斯·肯德雷西是安大略省预备役军官，他曾在2020年12月5日举行反封锁集会，并在集会上公开发表演讲，号召人们不要接种疫苗。'}
]/* 创建dom元素节点*/const ele = (<ul>{news.map((item)=>{return <li key={item.id}><h5>{item.title}</h5><span>{item.content}</span></li>})}</ul>)ReactDOM.render(ele,document.querySelector('#root'))
</script>