反应 dom , getElementByID

Question

我们如何将正常的 DOM 操作设置为 React DOM

这是我的代码

尝试过不同的方式，因为我得到了继续错误

Answer 1

DOM 找不到这个元素

let stockPriceElement = document.getElementById('stock-prize');

stockPriceElement 未定义，尝试控制台记录它。

请分享 codesandbox link 以便我能为您提供更多帮助

Answer 2

您永远不应该在 React 中使用 DOM 操作来更新 DOM。
使用状态来管理数据。如果数据位于组件树中的其他位置，请使用 context API 或全局状态。
您收到的错误是因为当您的代码执行时目标元素尚未呈现。使用 ref 访问 DOM 个节点。更多关于 ref here

Answer 3

声明是正确的，但您需要在渲染后使用 getElementById 使用函数 useEffect 来完成它，如下所示：

  React.useEffect(() => {
  
let ws = new WebSocket('wss://stream.binance.com:9443/ws/etheur@trade');
let stockPriceElement = document.getElementById('stock-prize');


ws.onmessage = (event)=>{
    let stockObject = JSON.parse(event.data);
    stockPriceElement.innerText = parseFloat(stockObject.p).toFixed(2);
}
return () => ws.close(); //closes connection on unmmount
  }, [])

让我知道它是否有效

反应 dom , getElementByID

React dom , getElementByID

getelementbyid

reactjs

react-dom

react-ref