当前位置:网站首页 > React Native移动开发 > 正文

react 组件(react组件)



特别注意这里的写法,如果要在 JSX 里写 js 表达式(只能是表达式,不能是流程 控制语句),就需要加 {},包括注释也是一样,并且可以多层嵌套

ES6 的加入让 JavaScript 直接支持使用 class 来定义一个类,react 的第二种创建组件 的方式就是使用的类的继承,ES6 class 是目前官方推荐的使用方式,它使用了 ES6 标准 语法来构建

组件名称必须以大写字母开头。

<Welcome name="james">

小驼峰命名来定义属性

<Welcome className="blue" tabIndex="1" >

函数组件通过参数 props 接收外部组件传入的数据, 在组件内根据 props 处理 UI

传递值:

<Header id="1001" url="http://xxx.com"></Header>

函数式组件用参数 props 接收值

类组件中处理props

类组件通过this.props接收外部组件传入的数据,在组件内根据this.props处理UI

class 组件内部用 this.props 接收值

子组件:

父组件中

注意:

原名是可以省略,充当的是一个包裹元素(包裹其他标签), 最终在页面中不会渲染.

在react组件中,使用sass编写组件样式,需要依赖sass插件。

使用步骤:

下载插件

npm i sass -D

创建.scss文件,编写sass代码

在组件中引入scss文件

import 'https://www.jb51.net/article/App.scss';

主文件

子文件

特别说明:HTML中表单元素是可输入的,也就是有自己的可变状态,但是默认表单元素的值不受所在组件state的控制,也就是表单元素所在组件无法实时获取最新的表单元素值

表单元素值不受所在组件状态的控制,我们将这样的表单元素称为:非受控组件

受控组件:值受到React组件状态控制的表单元素

一般是通过defaultValue属性,onChange事件配合将非受控组件变为受控组件

  • 文本框、富文本框、下拉框操作value属性
  • 复选框操作checked属性

  • 给表单元素添加name属性,名称与state相同
  • 根据表单元素类型获取对应值
  • 在change事件处理程序中通过[name]来修改对应的state

到此这篇关于React组件的使用详细讲解的文章就介绍到这了,更多相关React组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

到此这篇react 组件(react组件)的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章,希望大家都能在编程的领域有一番成就!

版权声明


相关文章:

  • react获取当前路由地址(react获取地址栏参数)2025-11-27 10:36:08
  • react 进阶之路(react进阶之路)2025-11-27 10:36:08
  • react组件constructor(react 组件)2025-11-27 10:36:08
  • reactui组件(react ui组件)2025-11-27 10:36:08
  • reactui组件(react dialog组件)2025-11-27 10:36:08
  • react 常用组件库(react组件三大属性)2025-11-27 10:36:08
  • react入门项目(react 快速入门)2025-11-27 10:36:08
  • 移动拆包是什么意思(移动拆机是什么意思)2025-11-27 10:36:08
  • 速排蚂蚁编辑器怎么移动图片(速排小蚂蚁编辑器怎么保存)2025-11-27 10:36:08
  • react 入门教程(react从入门到精通)2025-11-27 10:36:08
  • 全屏图片