0
私はHOCを作成しました.HOCは、すべての子を反復してプロパティを追加することによってコンポーネントを操作します。コンポーネントが更新サイクルを実行し、render（）を呼び出すことができますが、DOMを変更することはできません。
操作されたコンポーネントは、最初は適切にレンダリングされます。しかし、変更があった場合、その変更はDOMに反映されません。
レンダリングとcomponentDidUpdateが正しくログされていることを確認しました。コンポーネントをHOCにラップしないと、すべて正常に動作します。
これは私が使用するテストコンポーネントさ：スタイルをログに記録する場合
class ColorBox extends React.Component {
constructor(props) {
super(props)
this.state = {
value: 'rgb(0, 0, 0)'
}
}
componentDidUpdate() {
console.trace()
}
randomizeColor() {
const colArr = []
for(let i=0; i<3; i++) {
const col = Math.round(Math.random() * 255)
colArr.push(col)
}
this.setState({
value: `rgb(${colArr})`
})
}
render() {
const style = {
width: '20px',
height: '20px',
backgroundColor: this.state.value
}
console.log(style)
return (
<div>
<br />
<button onClick={ this.randomizeColor.bind(this) }>
Randomize
</button>
<div style={ style } />
</div>
)
}
}
、色の値が変更されますが、DOMではありません。アンラップされたコンポーネントとの唯一の違いは、console.trace（）を実行すると、トレーススタックはラップされたコンポーネントで長くなることです。私はちょうどそこから見るべきものを知らない。
componentDidUpdate @ complex.js:118
componentDidUpdate @ createPrototypeProxy.js:44
measureLifeCyclePerf @ ReactCompositeComponent.js:75
(anonymous) @ ReactCompositeComponent.js:729
notifyAll @ CallbackQueue.js:76
close @ ReactReconcileTransaction.js:80
closeAll @ Transaction.js:206
perform @ Transaction.js:153
perform @ Transaction.js:140
perform @ ReactUpdates.js:89
flushBatchedUpdates @ ReactUpdates.js:172
closeAll @ Transaction.js:206
perform @ Transaction.js:153
batchedUpdates @ ReactDefaultBatchingStrategy.js:62
enqueueUpdate @ ReactUpdates.js:200
enqueueUpdate @ ReactUpdateQueue.js:24
enqueueSetState @ ReactUpdateQueue.js:219
./node_modules/react/lib/ReactBaseClasses.js.ReactComponent.setState @ ReactBaseClasses.js:64
randomizeColor @ complex.js:126
randomizeColor @ createPrototypeProxy.js:44
./node_modules/react-dom/lib/ReactErrorUtils.js.ReactErrorUtils.invokeGuardedCallback @ ReactErrorUtils.js:69
executeDispatch @ EventPluginUtils.js:85
executeDispatchesInOrder @ EventPluginUtils.js:108
executeDispatchesAndRelease @ EventPluginHub.js:43
executeDispatchesAndReleaseTopLevel @ EventPluginHub.js:54
forEachAccumulated @ forEachAccumulated.js:24
processEventQueue @ EventPluginHub.js:257
runEventQueueInBatch @ ReactEventEmitterMixin.js:17
handleTopLevel @ ReactEventEmitterMixin.js:28
handleTopLevelImpl @ ReactEventListener.js:72
perform @ Transaction.js:140
batchedUpdates @ ReactDefaultBatchingStrategy.js:62
batchedUpdates @ ReactUpdates.js:97
dispatchEvent
私の質問は次のとおりです。レンダリングは実行されますが、DOMは更新されません。トレーススタックをどのように見なければなりませんか？