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

news2025/5/20 22:22:15

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>