React.js document.querySelectorAll() 不返回任何内容

Question

我基本上是在制作一个以 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>        );    }    };

Answer 1

DOMContentLoaded当浏览器知道 HTML 的基本结构时，只会触发一次。它在初始加载后再也不会被调用。您应该直接在按钮选项卡上挂钩您的事件：

<button id="tab-1" onClick={changeTabs} role="tab" aria-selected="true" aria-controls="tab-A" tabIndex="0">Tab A</button>

<button id="tab-2" onClick={changeTabs} role="tab" aria-selected="false" aria-controls="tab-B" tabIndex="-1">Tab B</button>

<button id="tab-3" onClick={changeTabs} role="tab" aria-selected="false" aria-controls="tab-C" tabIndex="-1">Tab C</button>