ReactJS学习(四)
2023-02-19 12:24:21 时间
2.4.2、组件
组件是React中最重要也是最核心的概念,一个网页,可以被拆分成一个个的组件, 像这样:
在React中,这样定义一个组件:
import React from 'react'; //第一步,导入React
class HelloWorld extends React.Component { //第二步,编写类并且继承 React.Component
render(){ //第三步,重写render()方法,用于渲染页面
return <div>hello world!</div> //JSX语法
}
}
export default HelloWorld; //第四步,导出该类
查看效果:
2.4.2.1、导入自定义组件
创建Show.js文件,用于测试导入组件:
import React from 'react'
import HelloWorld from './HelloWorld' //导入HelloWorld组件
class Show extends React.Component{
render(){
return <HelloWorld/>; //使用HelloWorld组件
}
}
export default Show;
测试:
2.4.2.2、组件参数
组件是可以传递参数的,有2种方式传递,分别是属性和标签包裹的内容传递,具体使用如下:
import React from 'react'
import HelloWorld from './HelloWorld' //导入HelloWorld组件
class Show extends React.Component{
render(){
return <HelloWorld name="zhangsan">shanghai</HelloWorld>; //使用HelloWorld组件
}
}
export default Show;
其中,name="zhangsan"就是属性传递,shanghai就是标签包裹的内容传递。
那么,在HelloWord.js组件中如何接收参数呢?
对应的也是2种方法:
属性:this.props.name 接收;
标签内容:this.props.children 接收;
使用如下:
import React from 'react'; //第一步,导入React
class HelloWorld extends React.Component { //第二步,编写类并且继承 React.Component
render(){ //第三步,编写render()方法,用于渲染页面
return <div>hello world! name={this.props.name}, address={this.props.children}
</div> //JSX语法
}
}
export default HelloWorld; //第四步,导出该类
测试:
相关文章
- 2022高频前端面试题合集之JavaScript篇(中)
- 2022年面向前端开发人员的9个最佳UI组件库/框架
- 面试题: UDP 与 TCP 区别?
- GitLab 管理界面设置中文
- 面试题:Spring 事务的实现方式和实现原理?
- 面试题:说下原生 JDBC 操作数据库流程?
- 面试题: ArrayList 与 Vector 区别?
- 面试题:重载和重写的区别?
- 面试题:接口和抽象类的区别是什么?
- 面试题:为什么说 Mybatis 是半自动ORM 映射工具?它与全自动的区别在哪里?
- 面试题:Spring 有什么优点
- 分享一个只需要几行代码,完成页面小机器人
- 分享一行代码实现天气预报,前端页面天气预报
- 面试题: SpringMVC的执行流程?
- Thymeleaf关闭页面缓存配置
- CentOS7-命令-进入网卡配置页面(nmtui)
- meterpreter 监控桌面命令(screenshare)
- Windows10-如何将此电脑和控制面板以及网络和用户的文件等,显示到桌面上快捷方式
- 单词搜索系列问题
- 买卖股票的最佳时机系列问题