react 组件之组件的属性

2023-01-14 117

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： react 组件分为两种组件（由于本人会ts(typescript),所以后面的列子都是基于typescript来进行组件编写）

含义: 组件是包含内容（html），样式(css)和功能(js)的ui单元

分类

react 组件分为两种组件（由于本人会ts(typescript),所以后面的列子都是基于typescript来进行组件编写）

函数式组件
类组件

函数式组件

返回一个React元素

代码格式例如：

import React from 'react'
export default function MyFuncComp() {
  return (
    <div>
      我是函数式组件,// 这里面需要可以写该组件对于的css, js 和 html等，但是建议使用jsx
    </div>
  )
}

使用方式：

在需要使用的地方，import 该组件，然后在对应的位置中使用即可，但是这里有两种使用方式：

直接函数使用：

通过组件的方式使用：

效果

类组件

必须继承React.Component

必须提供render函数，用于渲染组件

样例：

import React, { Component } from 'react'
export default class MyClassComp extends Component {
  render() {
    return (
      <div>
        我是类组件
      </div>
    )
  }
}

使用方式

和上面的函数式组件一样的，都是两种方式

注意事项：

react 组件导出的函数式组件或者类组件命名必须大写(大驼峰命名),原因，我们在使用组件的时候，如果使用标签的方式来进行使用，如果不是大驼峰的方式命名的话，在使用用会报错：

使用组件的方式，尽量使用标签的方式，原因：使用标签的方式方便 react devtools 来进行调试，如：

函数调用方式：

组件传参

函数组件

对于函数组件，属性会作为一个对象的属性，传递给函数的第一个参数

样例：

// MyFuncComp.tsx 组件内容
import React from 'react'
interface MyFuncCompProps{
  // 测试数据
  num: number
}
export default function MyFuncComp(props:MyFuncCompProps) {
  return (
    <div>
      我是函数式组件,传递的数字{props.num}
    </div>
  )
}
// main.tsx 中调用
import React from 'react'
import ReactDOM from 'react-dom'
import MyFuncComp from './pro/comp/MyFuncComp'
ReactDOM.render(
  <div>
     <MyFuncComp num={1} /> // 可以多次调用达到复用
     <MyFuncComp num={2} /> // 进行传参
  </div>
 ,
  document.getElementById('root')
)

效果：

类组件

对于类组件，属性会作为一个对象的属性，传递给构造函数的参数,(这一步操作，react 会默认自动完成)

样例

// MyClassComp.tsx 文件内容
import React, { Component } from 'react'
interface MyFuncCompProps {
  // 测试数据
  num: number
}
export default class MyClassComp extends Component<MyFuncCompProps> { // MyFuncCompProps 这个地方对组件属性进行限制
  render() {
    return (
      <div>
        我是类组件,传过来的数字是：{this.props.num}
      </div>
    )
  }
}
// main.tsx 中调用
import React from 'react'
import ReactDOM from 'react-dom'
import MyClassComp from './pro/comp/MyClassComp'
ReactDOM.render(
  <div>
     <MyClassComp num={1} /> //多次调用
     <MyClassComp num={2} /> // 传参方式是一样，参数的类型可以是任意的，只要接口约定好就行
  </div>
 ,
  document.getElementById('root')
)

效果

注意：组件的属性,传递的参数应该使用``小驼峰命名法,参数理论上可以是任何值，包括react 创建的虚拟dom

组件无法改变自身的属性。

之前学习的React元素,div、li 基本上的html标签，本质上，就是一个组件（内置组件）

React中的哲学：数据属于谁，谁才有权力改动

React中的数据，自顶而下流动，单向数据流

组件传递一个jsx 对象

通过上面我们知道了，组件可以传递任意的参数，但是如果我想在组件里面传递一个jsx对象呢？

两种方式：

第一种是直接通过属性的方式来进行传递，

例如：

import React, { Component } from 'react'
interface MyFuncCompProps {
  // 测试数据
  html: JSX.Element
}
export default class MyClassComp extends Component<MyFuncCompProps> {
  render() {
    return (
      <div>
        我是类组件,传过内容是：
        {this.props.html}
      </div>
    )
  }
}
// main.tsx 中调用
import React from 'react'
import ReactDOM from 'react-dom'
import MyClassComp from './pro/compProp/MyClassComp'
ReactDOM.render(
  <div>
     <MyClassComp html={<h1> 第一个标签</h1>} /> 
     <MyClassComp html={<h2> 第二个标签</h2>} /> 
  </div>
 ,
  document.getElementById('root'))