document.getElementById() 没有找到任何东西答案

【问题标题】：document.getElementById() does not find anything ReactJSdocument.getElementById() 没有找到任何东西
【发布时间】：2021-10-29 02:49:40
【问题描述】：

您好，我正在使用 ReactJS 创建进度条，但我遇到了问题

我的进度条将是一个 React 组件，我将在 props 中传递进度值

由于某种原因，document.getElementById() 似乎没有找到任何东西

import './MyProgressBar.css'

const MyProgressBar = (props) => {
    
    const value = props.value

    const progressbar = document.getElementById("hello");

    progressbar.style.width = value + "%"


    return (
        <div class="progress">
            <div id="hello" class="color"></div>
        </div>
    )
}

export default MyProgressBar

它会抛出一个错误，提示“无法在 MyProgressBar (MyProgressBar.js:9) 处读取 null 的属性 'style'.....”

【问题讨论】：

在 DOM 准备好之前评估在组件顶层运行的代码，如果您必须使用直接操作将其包装在 useEffect 或 useLayoutEffect 中，但你真的应该利用 React 进行响应式更改。

标签： javascript html reactjs progress-bar getelementbyid

【解决方案1】：

错误的原因是该元素在您查找时还不存在。您可以使用useEffect 或useLayoutEffect 回调“修复”该问题，但这不是React 方法。当 props 发生变化时，你的组件会被调用重新渲染，所以直接在新状态下处理渲染：

const MyProgressBar = ({value}) => {
    return (
        <div class="progress">
            <div class="color" style={{width: value + "%"}}></div>
        </div>
    );
};

这还有一个好处是你可以在页面中同时拥有多个MyProgressBar实例。

现场示例：

const {useState, useEffect} = React;

const MyProgressBar = ({value}) => {
    return (
        <div className="progress">
            <div className="color" style={{width: value + "%"}}></div>
        </div>
    );
};

const App = () => {
    const [bar1, setBar1] = useState(0);
    const [bar2, setBar2] = useState(0);

    useEffect(() => {
        const t1 = setInterval(() => {
            setBar1(b1 => {
                if (b1 < 100) {
                    ++b1;
                    return b1;
                }
                clearInterval(t1);
                return b1;
            });
        }, 200);
        const t2 = setInterval(() => {
            setBar2(b2 => {
                if (b2 < 100) {
                    ++b2;
                    return b2;
                }
                clearInterval(t2);
                return b2;
            });
        }, 400);
    }, []);

    return <div>
        <div>
            Every 200ms:
            <MyProgressBar value={bar1} />
        </div>
        <div>
            Every 400ms:
            <MyProgressBar value={bar2} />
        </div>
    </div>;
};

ReactDOM.render(<App/>, document.getElementById("root"));

.color {
    background-color: blue;
    height: 100%;
}
.progress {
    height: 1em;
}

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>

【讨论】：

【解决方案2】：

此代码在 DOM 上没有任何内容之前运行。

你可以在 useEffect 中使用它，在渲染之后运行。

useEffect(() => {
 const value = props.value
    const progressbar = document.getElementById("hello");
    progressbar.style.width = value + "%";    
  }, [props.value]);

你也可以使用 useRef

【讨论】：

【解决方案3】：

你 document.getElementById 在实际渲染之前运行，所以它找不到任何具有该 Id 的元素

不建议在你的 Reactjs 代码中使用document.getElementById，而是使用useRef：

function App() {
  const divRef = React.useRef();

  React.useEffect(() => {
console.log(divRef.current);
  }, []);

  return (
<div class="progress">
  <div ref={divRef} id="hello" class="color"></div>
</div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="root"></div>

【讨论】：

【解决方案4】：

在 react 中，您不必通过 id 访问元素。

我鼓励你这样做：

import './MyProgressBar.css'

const MyProgressBar = (props) => {
    
    const value = props.value

    return (
        <div class="progress">
            <div style={{width: `${value}%` }}></div>
        </div>
    )
}

export default MyProgressBar

【讨论】：

【解决方案5】：

如前所述，document.getElementById 在发生反应时将不起作用。因为它是在创建实际 DOM 之前运行的。

第一种方法是使用useEffect


   import './MyProgressBar.css'
   import { useEffect, useState } from 'react';
   
   const MyProgressBar = (props) => {
       const [progressbarWidth, setProgressbarWidth] = useState(0)
       useEffect(() => {
           const value = props.value
           setProgressbarWidth(value) 
       }, [props.value])
   
       return (
           <div class="progress" style={{ width: `${progressbarWidth}%` }}>
               <div id="hello" class="color"></div>
           </div>
       )
   }
   
   export default MyProgressBar

第二种方法是使用useRef


   import './MyProgressBar.css'
   import { useEffect, useRef } from 'react';
   
   const MyProgressBar = (props) => {
       const progressbarRef = useRef()
       useEffect(() => {
           const value = props.value
           progressbarRef.current.style.width = value + "%" 
       }, [props.value])
   
       return (
           <div class="progress" ref={progressbarRef}>
               <div id="hello" class="color"></div>
           </div>
       )
   }
   
   export default MyProgressBar

【讨论】：