如何将querySelector的查询范围限制在单个React组件内

你代码中的THISREACTCOMPONENT可以通过给组件根节点绑定ref，再调用根节点的querySelector实现当前组件范围内的元素查询，更推荐的是直接给目标元素绑定ref，不用做DOM查询。具体实现如下：

方案1：直接给目标DOM绑定ref（React官方推荐写法） #

这种方式不用做DOM查询，性能更好，也不会出现匹配到外部元素的问题，适合你需要操作单个确定元素的场景：

// 注意原代码子组件类名和父组件重名，修正为ListItemComponent
export class ListItemComponent extends Component<...> {
    // 创建ref实例
    private targetDomRef = React.createRef<HTMLDivElement>();

    componentDidMount(): void {
        // 非空判断避免空指针报错
        if (this.targetDomRef.current) {
            this.targetDomRef.current.style.backgroundColor = "#123123";
        }
    }

    render(): ReactNode {
        return (
            <div>
                {/* 把ref绑定到你要操作的目标元素上 */}
                <div className="toTarget" ref={this.targetDomRef}>
                </div>
            </div>
        );
    }
}

方案2：从组件根节点发起DOM查询 #

如果你需要通过选择器匹配多个元素，可以给组件根节点绑定ref，再调用根节点的querySelector/querySelectorAll，查询范围只会限定在当前组件内部：

export class ListItemComponent extends Component<...> {
    // 绑定组件根节点的ref
    private rootRef = React.createRef<HTMLDivElement>();

    componentDidMount(): void {
        if (this.rootRef.current) {
            // 从根节点开始查询，只会匹配当前组件内的.toTarget元素
            const elementToChange = this.rootRef.current.querySelector(".toTarget");
            if (elementToChange) {
                elementToChange.style.backgroundColor = "#123123";
            }
        }
    }

    render(): ReactNode {
        {/* 给根节点绑定ref */}
        return (
            <div ref={this.rootRef}>
                <div className="toTarget">
                </div>
            </div>
        );
    }
}

额外注意点 #

• 原代码中的颜色值缺少#前缀，直接写123123不会生效，需要修改为#123123
• 访问ref实例的current属性前建议加非空判断，避免渲染异常时出现空指针报错

内容的提问来源于stack exchange，提问作者MWB