创建组件的第一种方式并为组件传递 props 数据|学习笔记

简介: 快速学习创建组件的第一种方式并为组件传递 props 数据

开发者学堂课程【React 入门与实战创建组件的第一种方式并为组件传递 props 数据】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址https://developer.aliyun.com/learning/course/585/detail/8088


创建组件的第一种方式并为组件传递 props 数据


目录:

一、创建组建的方式

二、注意事项


一、创建组件的方式

基于组件化开发

示例:

03.jsx 语法中的注意事项

// 1.导入包

import React from 'react '

import ReactDoMfrom 'react-dom'

// 3.调用 render 函数渲染  jsx XML 比 HTML 严格

//什么情况下需要使用(〉呢?

//当需要在 JSX 控制的区域内,写JS表达式了,则需要把 JS 代码写到{}

ReactDOM.render(

123

, document.getElementById ( ' app '))

运行页面:

image.png

//第一种创建组件的方式,一个普通的构造函数就是一个组件

Function Hello(){ }

//如何使用:直接在 render 中调用

ReactDOM.render(

123

直接把组建的名称,以标签的形式,丢到页面上即可

*/>, document.getElementById ( ' app '))

运行报错:

image.png

原因:组件未返回任何东西,错误原因组件中未返回一个状态

代码修改:

//如果在一个组件中 return null,则表示此组件什么都不渲染

Function Hello(){

Return null

}

运行结果:

image.png

添加代码:

retunrn

Hello组件

image.png

function 组件内部必须返回一个合法的的 JSX 虚拟 DOM 元素

例如此时环境为 VUE 环境

//创建狗对象,拥有三个属性,交给 hello 渲染

Const dog={

Name:”大黄”,

Age:3,

Gender:”

}

运行结果:

image.png

React组件中可以清楚看到传入的 name

在组件内部输入需要在方法中接受

Function Hello(props){

Console.log(props)

Return

这是Hello组件

}

Const dog={

Name:”大黄”,

Age:3,

Gender:”

}

运行结果:

image.png

Props 是一个对象

Function Hello(props){

Console.log(props)

Return

这是 Hello 组件 ---{props.name}

}

运行结果:

image.png

可以将 age gender 传入

保存打开 React 工具,选择 Hello 组件

运行结果:

image.png

渲染 age gender

Function Hello(props){

Console.log(props)

Return

这是Hello组件 ---{props.name}

---{props.age} ---{props.gender}

}

运行结果:

image.png

在组件中接收外界传来的数据,在形参中接收,形参的命名都可以,但最好通过语义写

//props 对象重新赋值

Props.name=’zs’

运行结果:

image.png

报错:name 是只读的,不可修改

Vue 中有 props,也是只读的

结论:

不论是 vue 还是 React,组件中的 props 永远都是只读的,不能够被重新赋值


二、注意事项

创建组件:

Function Hello(){

//Return null

Return

Hello组件

}

为组件传递数据:

//使用组件并为组件传递 props 数据,使用 props 形参

//在构造函数中接收外界传递过来的数据

Function Hello(props){

Console.log(props)

Return

这是Hello组件 ---{props.name}

---{props.age} ---{props.gender}

}

1.父组件向子组件传递数据

2.使用{...obj}属性扩散传递数据

3.将数据封装到单独的文件中

4.组件名称必须是大写

相关文章
|
11月前
|
缓存 JavaScript C++
【Vue】—计算属性缓存VS方法以及侦听器的区别
【Vue】—计算属性缓存VS方法以及侦听器的区别
|
1月前
|
监控 JavaScript 开发者
在 Vue 中,子组件为何不可以修改父组件传递的 Prop,如果修改了,Vue 是如何监控到属性的修改并给出警告的
在 Vue 中,子组件不能直接修改父组件传递的 Prop,以确保数据流的单向性和可预测性。如果子组件尝试修改 Prop,Vue 会通过响应式系统检测到这一变化,并在控制台发出警告,提示开发者避免这种操作。
|
4月前
uniapp实战 —— 轮播图【自定义指示点】(含组件封装,自动注册全局组件,添加全局组件类型声明)
uniapp实战 —— 轮播图【自定义指示点】(含组件封装,自动注册全局组件,添加全局组件类型声明)
248 1
|
5月前
|
前端开发 JavaScript
传递给组件
传递给组件
|
4月前
|
移动开发 JavaScript 前端开发
VUE实现一个列表清单【props 父子组件通信、slot插槽的使用、全局自定义指令的封装、$nextTick解决异步DOM更新、巧用v-model简化父子组件之间的通信、触发事件的事件源event】
VUE实现一个列表清单【props 父子组件通信、slot插槽的使用、全局自定义指令的封装、$nextTick解决异步DOM更新、巧用v-model简化父子组件之间的通信、触发事件的事件源event】
42 0
|
前端开发 JavaScript
React中Refs的作用是什么?如何使用,父组件是函数组件ref如何获取子组件内容
React中Refs的作用是什么?如何使用,父组件是函数组件ref如何获取子组件内容
197 0
|
存储 JavaScript
如何使用 ref 属性获取子组件实例对象?
如何使用 ref 属性获取子组件实例对象?
144 0
|
JavaScript
vue中父组件异步数据通过props方式传递给子组件,子组件接收不到的问题
vue中父组件异步数据通过props方式传递给子组件,子组件接收不到的问题
366 0