Typescript + Hooks实践：用React打造一个定制的Message组件

2024-02-14 08:00:04

引言

React是一个流行的前端JavaScript库，用于构建用户界面。Typescript是JavaScript的超集，可以帮助我们编写更健壮的代码。Hooks是React中引入的新特性，允许我们在函数组件中使用状态和生命周期方法。

创建React Message组件

首先，我们需要创建一个新的React项目。我们可以使用create-react-app工具来快速创建一个新的项目。

npx create-react-app message-component

然后，我们需要在项目中安装Typescript和Hooks。

npm install typescript @types/react @types/react-dom
npm install @types/react-router-dom
npm install @typescript-eslint/eslint-plugin @typescript-eslint/parser

接下来，我们需要配置Typescript。在package.json文件中，添加以下脚本：

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
  "fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix"
}

然后，我们需要创建一个新的Typescript文件，比如Message.tsx。在这个文件中，我们将编写我们的Message组件。

import React, { useState, useEffect } from "react";

const Message = (props) => {
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    setVisible(true);
    setTimeout(() => {
      setVisible(false);
    }, 3000);
  }, []);

  return (
    <div className={`message ${visible ? "visible" : ""}`}>
      <p>{props.message}</p>
    </div>
  );
};

export default Message;

在这个组件中，我们使用了Hooks来管理组件的状态。我们使用了useState来管理组件的可见性，并使用了useEffect来在组件挂载时设置一个定时器，以便在3秒后隐藏消息。

接下来，我们需要在我们的React应用程序中使用这个组件。我们可以创建一个新的组件，比如App.tsx，并将Message组件作为它的子组件。

import React from "react";
import Message from "./Message";

const App = () => {
  return (
    <div className="App">
      <Message message="Hello, world!" />
    </div>
  );
};

export default App;