由于React使用JSX代码创建HTML，我们不能使用document之类的规则方法引用dom。querySelector或getElementById。

相反，我们可以使用React ref系统访问和操作Dom，如下例所示:

constructor(props){

    super(props);
    this.imageRef = React.createRef(); // create react ref
}

componentDidMount(){

    **console.log(this.imageRef)** // acessing the attributes of img tag when dom loads
}


render = (props) => {

const {urls,description} = this.props.image;
    return (

            <img
             **ref = {this.imageRef} // assign the ref of img tag here**
             src = {urls.regular} 
             alt = {description}
             />

        );

}

}

在我的例子中，我不能使用ref，因为元素是在许多子组件之间的某个地方，我必须通过类和id而不是ref访问它们。所以，尝试使用useEffect钩子没有工作，因为它找不到元素:

useEffect(() => {
  const el1 = document.querySelector('.el1')
  const el2 = document.querySelector('.el2')
}, [])

元素是未定义的，因为当它被安装时，子组件也不会在父组件之前被安装。

我所做的就是使用timeout:

useEffect(() => {
  const timer = setTimeout(() => {
    const el1 = document.querySelector('.el1')
    const el2 = document.querySelector('.el2')
  },500)
  return () => {
    clearTimeout(timer)
  }
}, [])

现在，它运行得很好。它找到了DOM，我就可以操纵它们了。希望这能帮助到别人!

免责声明:虽然上面的答案可能是一个更好的解决方案，但作为初学者，当你想要的只是一些非常简单的东西时，你需要接受很多东西。这是为了更直接地回答你最初的问题“我如何在React中选择某些元素”

我认为你的问题中的困惑是因为你有React组件，你正在传递id“Progress1”，“Progress2”等。我相信这不是设置html属性“id”，而是React组件属性。如。

class ProgressBar extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            id: this.props.id    <--- ID set from <ProgressBar id="Progress1"/>
        }
    }        
}

正如上面提到的一些答案，你绝对可以使用document。querySelector在你的React应用程序内部，但你必须清楚，它是选择html输出组件的渲染方法。假设你的渲染输出是这样的:

render () {
    const id = this.state.id
    return (<div id={"progress-bar-" + id}></div>)
}

然后你可以在其他地方做一个正常的javascript querySelector调用，像这样:

let element = document.querySelector('#progress-bar-Progress1')

React中与document.getElementById()等价的是document.querySelector()。

由于React使用JSX代码创建HTML，我们不能使用document之类的规则方法引用dom。querySelector或getElementById。

相反，我们可以使用React ref系统访问和操作Dom，如下例所示:

constructor(props){

    super(props);
    this.imageRef = React.createRef(); // create react ref
}

componentDidMount(){

    **console.log(this.imageRef)** // acessing the attributes of img tag when dom loads
}


render = (props) => {

const {urls,description} = this.props.image;
    return (

            <img
             **ref = {this.imageRef} // assign the ref of img tag here**
             src = {urls.regular} 
             alt = {description}
             />

        );

}

}

在更新的React版本中，你可以通过这样的钩子来使用和操作DOM:

import React, { useEffect, useRef } from "react";

const MyComponent = () => {
  const myContainer = useRef(null);
  
  useEffect(() => {
    console.log("myContainer..", myContainer.current);
  });

  return (
    <>
      <h1>Ref with react</h1>
      <div ref={myContainer}>I can use the DOM with react ref</div>
    </>
  );
};

export default MyComponent;

无论何时你想访问你的DOM元素，只要使用myContainer.current