day04--react中批量传递props

一、批量传递props

如果我们要传递的数据有很多,一个一个传的话有点麻烦,所以可以使用对象来定义数据,然后使用ES6的语法扩展运算符进行传递。

1.首先说明扩展运算符只能对数组进行展开,如果要对对象进行展开的话是不可以的,因为会报错,如下代码。

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let obj = {name: "李四",age: 19}
        console.log(...obj);//Uncaught TypeError: Spread syntax requires ...iterable[Symbol.iterator] to be a function
    </script>
</body>
</html>

2.那么想要对对象进行展开,那么必须使用构造字面量对象,如下代码。

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        let obj = { name: "李四", age: 19 }
        console.log({ ...obj });
        //打印: {
        //     "name": "李四",
        //     "age": 19
        // }
    </script>
</body>

</html>

3.那么理解了扩展运算符的使用,批量传递props的代码如下:

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello_react</title>
</head>

<body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>
    <!-- 引入react核心库 -->
    <script type="text/javascript" src="/react-development.js"></script>
    <!-- 引入react-dom,用于支持react操作DOM -->
    <script type="text/javascript" src="/react-dom-development.js"></script>
    <!-- 引入babel,用于将jsx转为js -->
    <script type="text/javascript" src="/babel.min.js"></script>
    <script type="text/babel">
        // 1.创建组件
        class Person extends React.Component {
            render() {
                const {name,age,sex} = this.props
                return (
                    <ul>
                        <li>名字:{name}</li>
                        <li>性别:{sex}</li>
                        <li>年龄:{age}</li>
                    </ul>
                )
            }
        }
        const p = {name: "李四",age: 18, sex: "女"}//外部要传递的数据
        // 因为引入react和使用了babel,那么我们就可以使用扩展运算符来展开对象
        // 但是对于原来的语法中,...扩展运算符只能展开数组,要想展开对象,必须使用构造字面量对象
        // 2.渲染虚拟DOM到页面
       	//{...p}:这里的{}并不是一个字面量对象,而是作为一个分割符使用,那么为什么...p可以使用,是因为引入react和使用了babel,它们帮我们使用构造字面量对象。
        ReactDOM.render(<Person {...p}/>, document.getElementById('test'))
    
    </script>
</body>

</html>
相关推荐
腾讯TNTWeb前端团队13 分钟前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰4 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪4 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪4 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy5 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom5 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom5 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom5 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom5 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom6 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试