使用react重构vue项目

最大的变化就是redux和组件的连接

// 这里可以通过props进行解构拿到redux的值和set redux的值的函数
const AppInfo: React.FC = ({ authAppId, setAuthAppId }: any) => {})
//  redux连接组件
export default connect(mapStateToProps, mapDispatchToProps)(AppInfo);

对于重复的dom元素代码可以封装成函数进行传参，大大简化代码，提高代码的复用性

	const renderInput = (placeholder: string, value: any, onChange: any, width = "260px") => (
		<div className="flex md-10">
			<span className="app-key">{placeholder}:</span>
			<Input placeholder={placeholder} value={value} onChange={onChange} style={{ width }} />
		</div>
	);
// 调用函数组件

const qrcodeInput = (
  <>
    {/* ...其他代码... */}
    {renderInput("name", qrcodeInfo.name, (e: any) => handleInputChange(e, "name", "qrcoce"))}
    {/* ...其他代码... */}
  </>
);

避免在return里面使用大量的dom元素，可以将其提取成函数放在return外面，在函数的return直接使用{qrcodeInput}实现代码的高维护性

完整的代码

import React, { useEffect, useState } from "react";
// import PropTypes from "prop-types";
import { Button, Input } from "antd";
import "./index.less";
import debounce from "lodash/debounce";
import { getApp, getQrcode, saveApp, saveQrcode } from "@/api/modules/app";
import { store } from "@/redux";
import { setAuthAppId } from "@/redux/modules/auth/action";
import { connect } from "react-redux";
import { AppInfoWithoutQrcode, InitQrcode } from "@/api/interface/app";

const initAppInfo: AppInfoWithoutQrcode = {
	appName: "",
	latestVerAndroid: "",
	minVerAndroid: "",
	latestVerIos: "",
	minVerIos: "",
	email: "",
	qrcode: ""
};
const initQrcodeInfo: InitQrcode = {
	name: "",
	random: "",
	url1: "",
	url2: "",
	url3: ""
};
const AppInfo: React.FC = ({ authAppId, setAuthAppId }: any) => {
	const [appInfo, setAppInfo] = useState(initAppInfo);
	const [qrcode, setQrcode] = useState("");
	const [qrcodeInfo, setQrcodeInfo] = useState(initQrcodeInfo);
	const [appId, setAppId] = useState(authAppId || null);
	console.log("🚀 ~ file: index.tsx:29 ~ store.getState().auth:", store.getState().auth);
	const handleInputChange = (e: { target: { value: any } }, key: any, attr: string) => {
		const value = e.target.value;
		if (attr === "appInfo") {
			setAppInfo((prevData: any) => ({ ...prevData, [key]: value }));
		} else {
			setQrcodeInfo((prevData: any) => ({ ...prevData, [key]: value }));
		}
	};
	const debounceApiRequest = debounce(async () => {
		if (!appId) return;
		// 在这里执行接口请求的逻辑
		const { data } = await getApp(appId)!;
		setAppInfo(data);
		setAuthAppId(appId);
		if (data.qrcode) {
			const { data: qrcodeData } = await getQrcode(data.qrcode);
			setQrcode(data.qrcode);
			setQrcodeInfo(qrcodeData);
		}
	}, 1000);
	const save = async (type: string) => {
		if (type === "appInfo") {
			await saveApp(appInfo);
		} else {
			await saveQrcode(qrcodeInfo);
		}
	};
	useEffect(() => {
		debounceApiRequest();
		return () => {
			debounceApiRequest.cancel(); // 组件卸载时取消防抖函数
		};
	}, [appId]); // 当 appId 变化时触发防抖函数
	const renderInput = (placeholder: string, value: any, onChange: any, width = "260px") => (
		<div className="flex md-10">
			<span className="app-key">{placeholder}:</span>
			<Input placeholder={placeholder} value={value} onChange={onChange} style={{ width }} />
		</div>
	);

	const appInfoInput = (
		<>
			<div className="flex md-10">
				<span className="app-key">appName:</span>
				{appInfo.name}
			</div>
			{renderInput("latestVerAndroid", appInfo.latestVerAndroid, (e: any) => handleInputChange(e, "latestVerAndroid", "appInfo"))}
			{renderInput("minVerAndroid", appInfo.minVerAndroid, (e: any) => handleInputChange(e, "minVerAndroid", "appInfo"))}
			{renderInput("latestVerIos", appInfo.latestVerIos, (e: any) => handleInputChange(e, "latestVerIos", "appInfo"))}
			{renderInput("minVerIos", appInfo.minVerIos, (e: any) => handleInputChange(e, "minVerIos", "appInfo"))}
			{renderInput("email", appInfo.email, (e: any) => handleInputChange(e, "email", "appInfo"))}
		</>
	);
	const qrcodeInput = (
		<>
			<div className="flex md-10">
				<span className="app-key">random:</span>
				{qrcodeInfo.random}
			</div>
			{renderInput("name", qrcodeInfo.name, (e: any) => handleInputChange(e, "name", "qrcoce"), "460px")}
			{renderInput("url1", qrcodeInfo.url1, (e: any) => handleInputChange(e, "url1", "qrcoce"), "460px")}
			{renderInput("url2", qrcodeInfo.url2, (e: any) => handleInputChange(e, "url2", "qrcoce"), "460px")}
			{renderInput("url3", qrcodeInfo.url3, (e: any) => handleInputChange(e, "url3", "qrcoce"), "460px")}
			<div className="flex">
				跳转链接：
				<a href={`https://oem.seventeen.tech/H5/qrcode/index.html?random=${qrcode}`}>
					{`https://oem.seventeen.tech/H5/qrcode/index.html?random=${qrcode}`}
				</a>
			</div>
		</>
	);

	return (
		<div>
			<div className="flex md-10">
				<span className="app-key">appId:</span>
				<Input placeholder={`appId`} value={appId} onChange={e => setAppId(e.target.value)} style={{ width: "260px" }} />
			</div>
			{appInfoInput}
			<div className="md-10 ml-130">
				<Button type="primary" htmlType="submit" onClick={() => save("appInfo")}>
					Save
				</Button>
			</div>
			<div className="flex md-10">
				<span className="app-key">qrcode:</span>
				<div className="border">{qrcodeInput}</div>
			</div>
			<div className="md-10 ml-130">
				<Button type="primary" htmlType="submit" onClick={() => save("qrcode")}>
					Save
				</Button>
			</div>
		</div>
	);
};
const mapStateToProps = (state: any) => {
	return {
		authAppId: state.auth.appId
	};
};
const mapDispatchToProps = { setAuthAppId };
AppInfo.propTypes = {};

export default connect(mapStateToProps, mapDispatchToProps)(AppInfo);