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>