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;
相关推荐
她超甜i14 分钟前
前端通过后端给的webrtc的链接,在前端展示,并更新实时状态
前端·javascript·webrtc
歪歪10020 分钟前
Redux和MobX在React Native状态管理中的优缺点对比
前端·javascript·react native·react.js·架构·前端框架
今天不要写bug36 分钟前
基于elementUI实现一个可编辑的表格(简洁版)
前端·javascript·elementui
一只小阿乐40 分钟前
vue-router 的实现原理
前端·javascript·vue.js·路由·vue-router
Zz_waiting.40 分钟前
案例开发 - 日程管理 - 第七期
开发语言·前端·javascript·vue.js·html·路由
writeone41 分钟前
9-10关于JS初学产生的问题
开发语言·javascript·ecmascript
一只小风华~44 分钟前
Vue:事件处理机制详解
前端·javascript·vue.js·typescript·前端框架
dy17175 小时前
element-plus表格默认展开有子的数据
前端·javascript·vue.js
一朵梨花压海棠go10 小时前
html+js实现表格本地筛选
开发语言·javascript·html·ecmascript
一只小风华~11 小时前
Vue: Class 与 Style 绑定
前端·javascript·vue.js·typescript·前端框架