React组件定义

一、定义

组件是是构建用户界面(UI)的基础,它可以是一个输入框、按钮、也可以是一整个页面。组件可以分为以下2种类型:

1、函数组件(Functional Components)

顾名思义就是用来函数定义的组件,是一种简单灵活的组件形式,又叫无状态组件。函数组件接收一个props对象作为参数,返回一个React元素作为输出。

2、类组件(Class Components)

是一种更加复杂的组件形式,通过继承React.Component类来定义组件。类组件有自己的状态和生命周期方法,提供了更多的功能和控制权。

二、创建React组件

1、函数组件

复制代码
function handleClick()  {
  console.log('登录了');
};
export default function Login (props){
  return (
    <div>
      <button className="btn" style={{'background':'red'}} onClick={handleClick}>登录{props}</button>
    </div>
  );
}

或者使用箭头函数

复制代码
const handleClick = () => {
  console.log('登录了');
};
const Login = (props) => {
const {name} = props;
  return (
    <div>
    <span>{name}</span>
      <button className="btn" style={{'background':'red'}} onClick={handleClick}>登录{props}</button>
    </div>
  )
};
export default Login;

2、类组件

复制代码
import  { Component } from 'react';

class Settings extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: props.name,,
      msg:'生死看淡,不服就干'
    };
  }

  handleClick = () => {
    this.setState({ name: '你好啊, React!' });
  }
  render() {
    return (
      <div>
        <h1 className="title" style={{color:'green'}}>{this.state.name}</h1>
        <h6>{this.state.msg}</h6>
        <button onClick={this.handleClick}> 点击 </button>
      </div>
    );
  }
}

export default Settings;

三、引入使用React组件

复制代码
import { useState } from 'react'
import Login from './views/login/index.jsx';
import Settings from './views/settings/index.jsx';
function App() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <Login name="LoginPage"/>
      <Settings name="SettingsPage"/>
    </div>
  )
}

export default App;
相关推荐
小桥风满袖10 分钟前
极简三分钟ES6 - ES8中字符串扩展
前端·javascript
少年阿闯~~13 分钟前
CSS3的新特性
前端·javascript·css3
Anson Jiang38 分钟前
浏览器标签页管理:使用chrome.tabs API实现新建、切换、抓取内容——Chrome插件开发从入门到精通系列教程06
开发语言·前端·javascript·chrome·ecmascript·chrome devtools·chrome插件
掘金安东尼41 分钟前
黑客劫持:周下载量超20+亿的NPM包被攻击
前端·javascript·面试
剑亦未配妥2 小时前
移动端触摸事件与鼠标事件的触发机制详解
前端·javascript
前端君9 小时前
实现最大异步并发执行队列
javascript
知识分享小能手11 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队12 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
萌萌哒草头将军12 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite
Qlittleboy12 小时前
uniapp如何使用本身的字体图标
javascript·vue.js·uni-app