現在公開中のデザイン&コーディングツールお道具箱をNext.js/TypeScriptで絶賛リプレイス中なのですが、コードを表示する部分でちょっと詰まりました。
エラー内容
コンソールにてWarningが出ていました。
Warning: A component is
contentEditable
and containschildren
managed by React. It is now your responsibility to guarantee that none of those nodes are unexpectedly modified or duplicated. This is probably not intentional.
要約:おいおいおめーさん、contentEditableしてるけどほんまにええんか?わいは知らんで。
状況
問題のコードはこちらです。
contentEditable
属性を利用することによって、div要素でもinput要素みたいにテキストを自由に編集することができるようになるのですが、それを使用したことによって警告がでるようになりました。
<div contentEditable spellCheck={false}>
<SyntaxHighlighter language="htmlbars" style={monokaiSublime}>
{codeString}
</SyntaxHighlighter>
</div>
対策
公式によると
子要素を持つ要素に
React – suppressContentEditableWarningcontentEditable
属性が付与されている場合、それは動作しないため通常は警告が出力されます。
とのことで警告が出ていたらしいのでsuppressContentEditableWarning
を挿入します。
<div
contentEditable
suppressContentEditableWarning={true}
spellCheck={false}
>
<SyntaxHighlighter language="htmlbars" style={monokaiSublime}>
{codeString}
</SyntaxHighlighter>
</div>
これで解消されました。
0