从前端新手到高手：打造自己的React Button组件！

2023-12-01 01:04:21

从零开始构建 React 按钮组件

组件化开发：打造模块化前端

组件化开发是构建灵活且可扩展的前端应用程序的关键技术。React 组件是可重用且独立的 UI 模块，允许开发者轻松组合和扩展应用程序。

创建 React 按钮组件

1. 初始化项目

使用 create-react-app 初始化一个新的 React 项目：

npx create-react-app my-button-component

2. 创建 Button 组件

在 src 目录下创建 Button.js 文件，其中包含 Button 组件：

import React from 'react';

const Button = (props) => {
  return (
    <button type="button" className="btn btn-primary">
      {props.children}
    </button>
  );
};

export default Button;

3. 使用 Button 组件

在 App.js 中，使用 Button 组件创建按钮：

import React from 'react';
import Button from './Button';

const App = () => {
  return (
    <div className="App">
      <Button>Click Me</Button>
    </div>
  );
};

export default App;

扩展 Button 组件

1. 添加样式

在 Button.js 中添加 CSS 样式：

import React from 'react';
import './Button.css';

const Button = (props) => {
  return (
    <button type="button" className="btn btn-primary">
      {props.children}
    </button>
  );
};

export default Button;

在 Button.css 中，添加样式：

.btn {
  padding: 10px 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #428bca;
  color: #fff;
}

.btn:hover {
  background-color: #3276b8;
}

2. 添加事件处理

在 Button.js 中，添加事件处理函数：

import React, { useState } from 'react';
import './Button.css';

const Button = (props) => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <button type="button" className="btn btn-primary" onClick={handleClick}>
      {props.children} ({count})
    </button>
  );
};

export default Button;