>我创建了一个 HOC，它通过遍历组件的所有子组件并向它们添加属性来操作组件。
操作的组件最初会正确呈现。但是，当发生更改时，更改不会反映在 DOM 中。
我已经通过日志记录检查了渲染和组件DidUpdate是否被触发，具有正确的值。如果我不将组件包装到 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？我应该查看哪些内容来查看跟踪堆栈？
您的代码似乎工作正常。请参阅下面的代码片段。 我唯一能想到的是，不是组件本身出了问题，而是您用来渲染组件的方法出了问题。
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>
)
}
}
ReactDOM.render(
<ColorBox />,
document.body
);<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
</body>
</html>