react要素を持つオブジェクトをディープクローンすると、その要素が壊れ、その要素をレンダリングできなくなります。
これは、この問題を示す例です。
import React from "react";
import "./styles.css";
import Demo from "./Demo";
export default function App() {
const test = <div>I'm a react element</div>;
console.log("test", test);
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<Demo obj={{ element: test }} />
</div>
);
}
//Demo.js
import React from "react";
// import cloneDeep from "lodash.clonedeep";
import CloneDeep from "clone-deep";
const Demo = ({ obj }) => {
const newProps = CloneDeep(obj);
console.log(newProps.element);
// console.log("Demo element", newProps.element);
return (
<div>
I'm Demo Component
{newProps.element}
</div>
);
};
export default Demo;
他にもいくつかのディープクローニングライブラリを試しましたが、私の場合はどれも機能しないようです！それで、これを行うライブラリを知っていますか？または多分私は何かをすることによって現在のクローン作成ライブラリを修正することができますか？または多分私は自分のディープクローニングを書くことができます、それに関するヒントはありますか？
私がこれまでに試したこと：
1-import CloneDeep from "clone-deep";これを使用するとobjects are not valid as a react childエラーが発生します
2-これを使用するとimport cloneDeep from "lodash.clonedeep";前のライブラリと同じエラーは発生しませんが、エラーがinfinity loop, Max Stack発生します！
ありがとう。
私はgithub clone-deep彼らのコードをコピーしていくつかの変更を加えました
1-最初に値がreact要素であるかどうかを確認しますReact.isValidElement
2- @ warmachineのおかげでReact.cloneElement、オブジェクトがreact要素であるかどうかを使用してオブジェクトを複製し、そうでない場合は私は図書館がいつもしていたことをします
ここで完全なコードを見ることができます：
import React from "react";
const clone = require("shallow-clone");
const typeOf = require("kind-of");
const isPlainObject = require("is-plain-object");
export function cloneDeep(val, instanceClone) {
if (React.isValidElement(val)) {
return React.cloneElement(val);
} else {
const valueType = typeOf(val);
switch (valueType) {
case "object":
return cloneObjectDeep(val, instanceClone);
case "array":
return cloneArrayDeep(val, instanceClone);
default: {
return clone(val);
}
}
}
}
function cloneObjectDeep(val, instanceClone) {
if (typeof instanceClone === "function") {
return instanceClone(val);
}
if (instanceClone || isPlainObject(val)) {
const res = new val.constructor();
for (let key in val) {
res[key] = cloneDeep(val[key], instanceClone);
}
return res;
}
return val;
}
function cloneArrayDeep(val, instanceClone) {
const res = new val.constructor(val.length);
for (let i = 0; i < val.length; i++) {
res[i] = cloneDeep(val[i], instanceClone);
}
return res;
}
もちろん、これは私がより良いものを見つけるか、うまくいけばgitハブの所有者が私が投稿した問題を反映するまでの一時的な解決策です
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加