如何在React中基于dom更新我的组件

Question

我正在使用React并单击一个按钮。当我点击该按钮时，页面上会显示一些内容，因此dom也会随之更新。

我正在尝试使用useEffect来检查用该内容更新的dom是否具有div，id为whatever。

我正在做一些类似。。。

const [color, setColor] = useState('');
useEffect(() => {
const isVisible = document.getElementById('whatever');
if (isVisible) {
setColor('blue');
} else {
setColor('');
}
}, [isVisible])

我的计划是，如果isVisible为真，那么在这种情况下，我会将颜色更新为blue，蓝色将是我页面的背景。

我想通过尝试以这种方式或其他方式访问dom来做到这一点，但肯定是通过尝试访问dom来实现的，我不知道该怎么做。

Answer 1

我会避免这种方法。您应该尽可能避免访问SPAs上的DOM元素。

React的最佳实践是在单击按钮后将类似isWhateverVisible的状态设置为true。该状态将被用于有条件地呈现类似于{isWhateverVisible && <div>whatever to show on click</div>}的whatever。

然后，将状态变量作为propisWhateverVisible向下传递，并在组件中使用。实际上，您可以用这种方式删除useEffect，并直接在组件上应用道具，以有条件地将页面绘制为<div style={{backgroundColor: props.isWhateverVisible ? 'blue' : '' }}>something</div>