技术新知：React、Sentry和前端就业指导

2023-11-22 15:45:50

React、Sentry和前端就业指导是本期酱酱下午茶的重点话题。我们将深入探讨如何在React中使用Hook和Typescript构建类型提示完整的高阶组件，并分享解决Sentry异常上报无法自动区分项目的经验。此外，我们还将为您带来应届生前端就业指导记录，希望能帮助大家顺利踏入前端开发领域。

React Hook+Typescript实现一个类型提示完整的高阶组件

React Hook是一个强大的特性，它允许我们在函数组件中使用状态和生命周期方法。Typescript是一种静态类型语言，它可以帮助我们编写出更加健壮的代码。我们将结合这两者，来实现一个类型提示完整的高阶组件。

首先，我们需要创建一个新的React项目。然后，我们可以使用以下命令安装Typescript：

npm install --save typescript

接下来，我们需要创建一个tsconfig.json文件。这个文件将告诉Typescript如何编译我们的代码。我们可以使用以下命令创建这个文件：

tsc --init

在tsconfig.json文件中，我们需要添加以下内容：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "jsx": "react-jsx"
  }
}

现在，我们可以开始编写我们的高阶组件了。我们将创建一个名为MyHOC.tsx的文件，并添加以下内容：

import * as React from "react";

export const MyHOC = <T>(WrappedComponent: React.ComponentClass<T>) => {
  return class extends React.Component<T> {
    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
};

这个高阶组件将接受一个组件作为参数，并返回一个新的组件。这个新组件将拥有原组件的所有属性和方法，同时还将拥有我们自己添加的属性和方法。

我们现在可以创建一个名为App.tsx的文件，并添加以下内容：

import * as React from "react";
import { MyHOC } from "./MyHOC";

const Button = (props: { onClick: () => void }) => {
  return <button onClick={props.onClick}>Click me</button>;
};

const MyButton = MyHOC(Button);

const App = () => {
  return <MyButton onClick={() => { console.log("Clicked") }} />;
};

export default App;