如何将查询选择器限制为反应组件

Question

我有一个带有子组件列表的反应组件。在子组件中，我想定位一个特定的 DOM 元素，例如，在其 ComponentDidMount 方法中更改颜色。我该怎么做？

父组件

export class ListComponent extends Component<...> {
    render(): ReactNode {
        return (
            <div>
                <ListItemComponent key="123"/>
                <ListItemComponent key="456"/>
                <ListItemComponent key="789"/>
            </div>
        );
    }
}

子组件

export class ListComponent extends Component<...> {
    componentDidMount(): void {
//      const elementToChange = document.queryselector(".toTarget");  // Only works for the first element as it only targets the first on the page
        const elementToChange = THISREACTCOMPONENT.queryselector(".toTarget");
        elementToChange.style.backgroundColor = "123123";
    }

    render(): ReactNode {
        return (
            <div>
                <div className="toTarget">
            </div>
        );
    }
}

那么，问题是，应该用什么来代替 THISREACTCOMPONENT？如何在 react 组件中专门定位一个元素？

Answer 1

使用反应ref。 Refs 已创建，因此您不必使用 queryselector，因为直接与 dom 交互可能会导致进一步的反应错误。

  export  class ListComponent extends Component<...> { {
      constructor(props) {
        super(props);
        this.myRef = React.createRef(); // Get a reference to a DOM element
      }
    componentDidMount(): void {
        const elementToChange = this.myref.current;
        elementToChange.style.backgroundColor = "123123";
    }
      render() {
        return (
            <div>
                <div className="toTarget"  ref={this.myRef}> // binds this element to the this.myref variable
            </div>
        )
      }
    }

Answer 2

您可以使用Document.querySelectorAll 来获取所有匹配的元素

document.querySelectorAll 返回匹配元素的数组。

那么你会这样做：

componentDidMount(): void {
  const elements = document.querySelectorAll(".toTarget");
  elements.forEach((el) => {
    el.style.backgroundColor = "123123";
  });
}