luckysheet在react中的使用

export function EditQualityPlanInfo({}: any) {
const [mineSheet, setMineSheet] = useState<any>(null)
	const [init, setInit] = useState<any>(true)
	const [data, setData] = useState<any>([
		{
			name: "Sheet1",
			row: 20,
			column: 16,
			"index": 0, //工作表索引
			"status": 1, //激活状态
			"order": 0, //工作表的下标
			"hide": 0,//是否隐藏
			defaultRowHeight: 60,
			celldata: [{
				"r": 0,
				"c": 0,
				"v": {
					ct: {fa: "General", t: "g"},
					m:"LOGO名称",
					v:"LOGO名称",
					"mc": { //合并单元格必备属性
						"r": 0, //主单元格的行号
						"c": 0, //主单元格的列号
						"rs": 3, //合并单元格占的行数
						"cs": 6 //合并单元格占的列数
					},
					ht: 0,
					tb: '2',
				}
			}, {
				"r": 0,
				"c": 6,
				"v": {
					ct: {fa: "@", t: "s"},
					m:"质量控制计划编 \r\n Quality Control Plan No.",
					v:"质量控制计划编 \r\n Quality Control Plan No.",
					"mc": { //合并单元格必备属性
						"r": 0, //主单元格的行号
						"c": 6, //主单元格的列号
						"cs": 3, //合并单元格占的列数
						"rs": 1, //合并单元格占的行数
					},
					ht: 0,
					vt: 0,
					tb: '2',
				},
			}, {
				"r": 0,
				"c": 9,
				"v": {
					ct: {fa: "@", t: "s"},
					m:"质量控制计划编号 \r\n Quality Control Plan No.",
					v:"质量控制计划编号 \r\n Quality Control Plan No.",
					"mc": { //合并单元格必备属性
						"r": 0, //主单元格的行号
						"c": 9, //主单元格的列号
						"cs": 3, //合并单元格占的列数
						"rs": 1, //合并单元格占的行数
					},
					ht: 0,
					vt: 0,
					tb: '2',
				},
			}, {
				"r": 1,
				"c": 9,
				"v": {
					ct: {fa: "@", t: "s"},
					m:"质量控制计划编号 \r\n Quality Control Plan No.",
					v:"质量控制计划编号 \r\n Quality Control Plan No.",
					"mc": { //合并单元格必备属性
						"r": 1, //主单元格的行号
						"c": 9, //主单元格的列号
						"cs": 3, //合并单元格占的列数
						"rs": 1, //合并单元格占的行数
					},
					ht: 0,
					vt: 0,
					tb: '2',
				},
			}, {
				"r": 1,
				"c": 6,
				"v": {
					ct: {fa: "@", t: "s"},
					m:"质量控制计划编号 \r\n Quality Control Plan No.",
					v:"质量控制计划编号 \r\n Quality Control Plan No.",
					"mc": { //合并单元格必备属性
						"r": 1, //主单元格的行号
						"c": 6, //主单元格的列号
						"cs": 3, //合并单元格占的列数
						"rs": 2, //合并单元格占的行数
					},
					ht: 0,
					vt: 0,
					tb: '2',
				},
			}, {
				"r": 3,
				"c": 8,
				"v": {
					ct: {fa: "@", t: "s"},
					m:"质量控制计划编号 \r\n Quality Control Plan No.",
					v:"质量控制计划编号 \r\n Quality Control Plan No.",
					"mc": { //合并单元格必备属性
						"r": 3, //主单元格的行号
						"c": 8, //主单元格的列号
						"cs": 2, //合并单元格占的列数
						"rs": 3, //合并单元格占的行数
					},
					ht: 0,
					vt: 0,
					tb: '2',
				},
			}],

		},
		{
			name: "Sheet2",
			row: 20,
			column: 16,
			defaultRowHeight: 60,
			"index": 1, //工作表索引
			"status": 0, //激活状态
			"order": 1,
			celldata: [{
				"r": 0,
				"c": 0,
				"v": {
					ct: {fa: "General", t: "g"},
					m:"LOGO名称",
					v:"LOGO名称",
					"mc": { //合并单元格必备属性
						"r": 0, //主单元格的行号
						"c": 0, //主单元格的列号
						"rs": 3, //合并单元格占的行数
						"cs": 6 //合并单元格占的列数
					}
				},
				ht: 0,
				tb: '2',
			}, {
				"r": 0,
				"c": 6,
				"v": {
					ct: {fa: "@", t: "s"},
					m:"质量控制计划编号 \r\n Quality Control Plan No.",
					v:"质量控制计划编号 \r\n Quality Control Plan No.",
					"mc": { //合并单元格必备属性
						"r": 0, //主单元格的行号
						"c": 6, //主单元格的列号
						"cs": 3, //合并单元格占的列数
						"rs": 1, //合并单元格占的行数
					},
					ht: 0,
					vt: 0,
					tb: '2',
				},
			}, {
				"r": 0,
				"c": 9,
				"v": {
					ct: {fa: "@", t: "s"},
					m:"质量控制计划编号 \r\n Quality Control Plan No.",
					v:"质量控制计划编号 \r\n Quality Control Plan No.",
					"mc": { //合并单元格必备属性
						"r": 0, //主单元格的行号
						"c": 9, //主单元格的列号
						"cs": 3, //合并单元格占的列数
						"rs": 1, //合并单元格占的行数
					},
					ht: 0,
					vt: 0,
					tb: '2',
				},
			}],

		}])

	useEffect(() => {
		// @ts-ignore
		const luckysheet = window?.luckysheet
		if (luckysheet && needExcel) {
			luckysheet.create({
				container: "luckysheet",
				showinfobar: false,
				enableAddBackTop: false,
				enableAddRow: false,
				lang: 'zh',
				data,
				hook: {
					// 表格创建之后触发
					workbookCreateAfter:function(allConfig){
						luckysheet.find("\n").forEach(({ row, column }, index, arr) => {
							luckysheet.setRangeShow({ row:[row], column:[column] }, {
								success: () => {
									// 进入编辑模式，让换行生效
									luckysheet.enterEditMode({
										success: () => {
											// 退出编辑模式
											luckysheet.exitEditMode();

											if (index === arr.length - 1) {
												luckysheet.setRangeShow({row: [0], column: [0]}, {
													show: false, // 选中状态不要高亮
												})
											}
										}
									});
								}
							})
						});
						setInit(false)
					},
					sheetActivate: function (index) {
						const newData = data?.map(item => {
							return {
								...item,
								status: item.index == index ? 1 : 0
							}
						})
						setData(newData)
					},
				}
			});
			setMineSheet(luckysheet)
		}
	}, [])
	useEffect(() => {
		if (mineSheet && mineSheet.refresh && !init && needExcel) {
			mineSheet && mineSheet.refresh({
			 success: ()=> {
				 mineSheet.find("\n").forEach(({ row, column }, index, arr) => {
					 mineSheet && mineSheet.setRangeShow({ row:[row], column:[column] }, {
						 success: () => {
							 // 进入编辑模式，让换行生效
							 mineSheet.enterEditMode({
								 success: () => {
										 // 退出编辑模式
										 mineSheet.exitEditMode();

									 if (index === arr.length - 1) {
										 // 选中第一个格子
										 mineSheet.setRangeShow({ row:[0], column:[0] }, {
											 show: false, // 选中状态不要高亮
										 })
									 }
								 }
							 });
						 }
					 })
					})
			 }
		})
		}
	}, [data])

	return  <div id="luckysheet" style={{
		width: '100%',
		height: `${16 * 4 * 20 + 100}px`,
	}} ></div>
}

luckcysheet在静态资源文件夹中放入，并在index.html中引用：