创建组件的第一种方式并为组件传递 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 '))

运行页面：

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

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.组件名称必须是大写