开发者学堂课程【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 '))
运行页面:
//第一种创建组件的方式,一个普通的构造函数就是一个组件
Function Hello(){ }
//如何使用:直接在 render 中调用
ReactDOM.render(
123
直接把组建的名称,以标签的形式,丢到页面上即可
*/>
, document.getElementById ( ' app '))
运行报错:
原因:组件未返回任何东西,错误原因组件中未返回一个状态
代码修改:
//如果在一个组件中 return null,则表示此组件什么都不渲染
Function Hello(){
Return null
}
运行结果:
添加代码:
retunrn
Hello
组件
在 function 组件内部必须返回一个合法的的 JSX 虚拟 DOM 元素
例如此时环境为 VUE 环境
//创建狗对象,拥有三个属性,交给 hello 渲染
Const dog={
Name:”
大黄”,
Age:3,
Gender:”
雄”
}
运行结果:
在React组件中可以清楚看到传入的 name
在组件内部输入需要在方法中接受
Function Hello(props){
Console.log(props)
Return
这是Hello组件
}
Const dog={
Name:”
大黄”,
Age:3,
Gender:”
雄”
}
运行结果:
Props 是一个对象
Function Hello(props){
Console.log(props)
Return
这是 Hello 组件 ---{props.name}
}
运行结果:
可以将 age gender 传入
保存打开 React 工具,选择 Hello 组件
运行结果:
渲染 age 和 gender
Function Hello(props){
Console.log(props)
Return
这是Hello组件 ---{props.name}
---{props.age} ---{props.gender}
}
运行结果:
在组件中接收外界传来的数据,在形参中接收,形参的命名都可以,但最好通过语义写
//为 props 对象重新赋值
Props.name=’zs’
运行结果:
报错: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.组件名称必须是大写