React（Preact）はコンテンツを2回レンダリングする

Question

編集可能なプレ要素では、テキストの不要なHTML要素を避けるために、Enterキーを押したときにのみonKeyDownスクリプトを実行します。段落コンテンツが変更され、コンテンツが再度レンダリングされなければならないようにsetState(content: newText)が呼び出されるhandleKeyDown関数で

render({}, {content}) { 
     console.log("render: "+content); 
     return <p contenteditable onKeyDown={this.handleKeyDown}>{content}</p> 
} 

。これにより、新しいテキストが2回書き込まれます。

私は "ハロー"、それは "ハロー
worldhello
世界" になりさえhandleKeyDownかかわら

と機能のレンダリングが正しい文字列ログインした後の "Hello World" と入力し、ブレイク：「
をこんにちは
ワールド "

私はここで間違っていますか？

Answer 1

contentEditableを使用する場合は、通常、dangerouslySetInnerHTMLを使用してHTMLコンテンツを設定する必要があります。

<div 
    contentEditable 
    dangerouslySetInnerHTML={{ 
     __html: value 
    }} 
    /> 

これを行う方法を示すworking JSFiddle exampleがあります。