react-组件

最新推荐文章于 2024-08-06 17:16:47 发布

合法的咸鱼

最新推荐文章于 2024-08-06 17:16:47 发布

阅读量139

点赞数

分类专栏： react 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/yuey0809/article/details/126008242

版权

react 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

本文介绍了React中的两种组件类型——函数组件和类组件。函数组件以纯函数形式定义，返回React元素；类组件需继承React.Component并实现render方法。文章通过示例代码展示了如何创建及使用这两种组件，并解释了组件属性的传递方式。在属性使用中，函数组件的属性直接作为参数，类组件的属性挂载在this上，且类组件的属性不可直接修改。

摘要由CSDN通过智能技术生成

react组件分为两种,函数组件与类组件

函数组件

MyFuncComp.js

import React from 'react'
// 函数名称首字母必须大写,否则react渲染时则会认为这是一个html元素而非react组件
export default function MyFuncComp() {
	// 函数必须返回React.createElement(), JSX当然可以
  return <h1>函数组件</h1>
}

类组件

MyClassComp.js

import React from 'react'
// 类组件必须继承自React.Component
export default class MyClassComp extends React.Component {
  // 类组件必须有一个render函数
  render() {
  	// 返回React.createElement(), JSX当然可以
    return <h1>类组件</h1>
  }
}

函数组件与类组件的使用

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import MyFuncComp from './MyFuncComp';
import MyClassComp from './MyClassComp';



const root = ReactDOM.createRoot(document.getElementById('root'));
// 可以重复使用
root.render(
  <React.StrictMode>
    <MyFuncComp/>
    <MyFuncComp/>
    <MyClassComp/>
    <MyClassComp/>
  </React.StrictMode>
);

组件的属性

函数组件的属性会被传入函数的参数
类组件的属性会被传入constructor的参数中

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import MyFuncComp from './MyFuncComp';
import MyClassComp from './MyClassComp';



const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    {/* 组件props: {number: 5, enable: true} */}
    <MyFuncComp number={5} enable /> 
    <MyFuncComp number="4" />
    <MyClassComp number={5} enable />
    <MyClassComp number="4" obj={{name: 'abc', age: 18}} />
  </React.StrictMode>
);

函数组件
MyFuncComp.js

import React from 'react'
export default function MyFuncComp(props) {
  return <h1>传入的数字是: {typeof props.number} {props.number}</h1>
}

类组件
MyClassComp.js

import React from 'react'

export default class MyClassComp extends React.Component {
  // 组件属性被传入这里,如果你的构造函数除了调用super以外没事做,则可以不写
  // 属性也会被挂载到this上边
  // constructor(props) {
  //   super(props)
  // }

  render() {
    if (this.props.obj) {
      // this.props.number = 8; // 会报错,不允许更改
      // this.props.obj.name = 'efg'; // 不会报错,可以更改,但是不要这个做,相信我,不然你脑子被人干放屁可别怪我
      return (
        <>
          <p>姓名: {this.props.obj.name}</p>
          <p>年龄: {this.props.obj.age}</p>
          <h1>传入的数字是: {typeof this.props.number} {this.props.number}</h1>
        </>
      )
    }
    return <h1>传入的数字是: {typeof this.props.number} {this.props.number}</h1>
  }
}