react/no-clone-element Restriction
它的作用
阻止使用 React.cloneElement，在 React 中这被视为一种反模式。
为什么这不好？
建议不要使用 React.cloneElement，因为它可能会导致代码更难跟踪和理解。它通常不常见且脆弱，并且有多种替代方案，详见 React 文档。
请注意，此规则基于 @eslint-react 中的 @eslint-react/no-clone-element ，而不是来自 eslint-plugin-react 的规则。
示例
此规则的错误代码示例：
jsx
import { cloneElement } from "react";
function List({ children }) {
const [selectedIndex, setSelectedIndex] = useState(0);
return (
<div className="List">
{Children.map(children, (child, index) =>
cloneElement(child, {
isHighlighted: index === selectedIndex,
}),
)}
</div>
);
}此规则的正确代码示例：
jsx
// 改为使用带有 `renderItem` 函数属性的 map。
function List({ items, renderItem }) {
const [selectedIndex, setSelectedIndex] = useState(0);
return (
<div className="List">
{items.map((item, index) => {
const isHighlighted = index === selectedIndex;
return renderItem(item, isHighlighted);
})}
</div>
);
}如何使用
To enable this rule using the config file or in the CLI, you can use:
json
{
"plugins": ["react"],
"rules": {
"react/no-clone-element": "error"
}
}ts
import { defineConfig } from "oxlint";
export default defineConfig({
plugins: ["react"],
rules: {
"react/no-clone-element": "error",
},
});bash
oxlint --deny react/no-clone-element --react-plugin版本
此规则在 v1.53.0 中添加。