快速开始
快速完成安装、Flat Config 接入，并执行第一轮自动修复。
ESLint PluginReact Codemod
把重复的 React 重构工作简化成可执行的 ESLint Fix。
Skip to content
示例
包装 JSX 内联值
tsx
import { Modal } from "./Modal";
function Demo(props: { text: string; backgroundColor: string }) {
return (
<Modal
info={{ size: 10, backgroundColor: props.backgroundColor }}
onClick={() => {
console.log(props.text);
}}
/>
);
}tsx
import { Modal } from "./Modal";
import { useCallback, useMemo } from "react";
function Demo(props: { text: string; backgroundColor: string }) {
const modalInfo = useMemo(
() => ({ size: 10, backgroundColor: props.backgroundColor }),
[props.backgroundColor],
);
const handleModalClick = useCallback(() => {
console.log(props.text);
}, [props.text, props]);
return <Modal info={modalInfo} onClick={handleModalClick} />;
}自动创建缺失 hook
tsx
import { Dialog } from "./Dialog";
const Demo = () => <Dialog ref={dialogRef} width={setWidth} />;tsx
import { Dialog, type DialogAPI } from "./Dialog";
import { useRef, useState } from "react";
const Demo = () => {
const dialogRef = useRef<DialogAPI>(null);
const [width, setWidth] = useState<Parameters<typeof Dialog>[0]["width"] | null>(null);
return <Dialog ref={dialogRef} width={setWidth} />;
};更多示例可查看 效果示例。