我基本上是在制作一個以 windows xp 為主題的作品集，但我很難為我的模態添加標簽。我正在學習一個教程（https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role），我的問題是當我調用 document.querySelectorAll('[role="tab "]') 我什么也沒得到。使用 querySelector() 返回 null。我在想這可能是因為在我打開模式之前尚未創建選項卡，但即便如此，事件偵聽器也不應該在每次將某些內容添加到 DOM 時檢查嗎？也許范圍是錯誤的，但是當我將它放在渲染中或類中的任何位置時會出現一些錯誤。這是我的組件：import React, { Component } from "react";import ReactDOM from "react-dom";import "xp.css/dist/XP.css";import Draggable from 'react-draggable';class AboutMeModal extends Component {    render() {        return (            <Draggable            axis="both"            handle=".tabs"            defaultPosition={{x: 40, y: -80}}            position={null}            grid={[25, 25]}            scale={1}            onStart={this.handleStart}            onDrag={this.handleDrag}            onStop={this.handleStop}>                <section className="tabs" style={{width:'calc(99%)'}}>                    <menu role="tablist" aria-label="Sample Tabs">                    <button id="tab-1" role="tab" aria-selected="true" aria-controls="tab-A" tabIndex="0">Tab A</button>                    <button id="tab-2" role="tab" aria-selected="false" aria-controls="tab-B" tabIndex="-1">Tab B</button>                    <button id="tab-3" role="tab" aria-selected="false" aria-controls="tab-C" tabIndex="-1">Tab C</button>                    </menu>                    <article role="tabpanel" id="tab-A" aria-labelledby="tab-1">                        <h3>Tab Content</h3>            </Draggable>        );    }    };