javascript - 对 dom 元素反应 useEffect

Question

假设我有两个“按钮”（它们是附加了 onClick 的 div 元素）。每个都在 div 元素中更改产品的价格。

在另一个组件中单击该 div 时，我该怎么做？

我可以以某种方式将 dom 元素放入 useEffect 的依赖项数组中吗？

例如：

useEffect(() => {
// Do stuff
}, [document.getElementById('div-that-shows-price')])

我试过上面的方法，没有用。我什至用 .textContent、innerHTML、.... 尝试过。

我猜我不能使用 ref 因为它们又在不同的组件中。或者我可以使用在另一个组件中定义的 ref 吗？

Answer 1

我认为你必须使用useRef钩子：

https://fr.reactjs.org/docs/hooks-reference.html#useref

Answer 2

我猜，您构建的基本上是计数器，在一个 div 中，您希望 count aka price 能够递增和递减，而在另一个 div 中，您希望看到按钮单击结果。由于您使用的是 React，因此这是通过useState()将具有按钮的父组件 div 传递给子组件 div 的结果 prop 来实现的。

Answer 3

问题不清楚。但是据我了解，为什么不将价格作为道具传递给另一个组件呢？您可以将产品价格置于父组件状态，并在两个按钮组件中将其作为道具（使用 updatePrice 方法）传递。或者使用全局状态（redux）。