Intro.js 的 React 包装器未识别元素答案

【问题标题】：elements are not identified by React wrapper for intro.jsIntro.js 的 React 包装器未识别元素
【发布时间】：2021-02-10 10:29:31
【问题描述】：

我正在为 intro.js 使用 react 包装器。我正在尝试将其集成到功能组件中。这些步骤工作正常，但 intro.js 没有正确识别步骤中提供的元素。我尝试使用 document.getElementById() 和 document.querySelector() 定义元素。似乎没有任何效果。有没有其他办法？

import React,{useState} from 'react'

import { Steps, Hints } from "intro.js-react";

import "intro.js/introjs.css"

import "intro.js/themes/introjs-nassim.css";

const AppIntro = () =>{

const [stepsEnabled, setStepsEnabled] = useState(false)
const [initialStep, setInitialStep] = useState(0)
const [steps, setSteps] = useState([
    {
        intro:"Welcome to our application",
        position: 'top'
    },
    {
        element:document.getElementById('.card'),
        intro: 'This is the second step',
        position: 'left'
    },
    {
        element: document.querySelector('.tableRow'),
        intro:'This is the third step',
        position: 'top'
    }
])
 const onExit = () =>{
    setStepsEnabled(false);
  }
const startIntro=()=>{
    setStepsEnabled(true)
}
return(
    <div>
    <button onClick={()=>startIntro()}>Click me</button>
    <Steps
         enabled={stepsEnabled}
         steps={steps}
         initialStep={initialStep}
         onExit={onExit}
         options=
         {{
             tooltipClass: 'customTooltip',
             showProgress: true,
             showStepNumbers: true,
             showBullets: false,
             exitOnOverlayClick: false,
             doneLabel: "Done",
             nextLabel: "Next",
             hideNext: false,
         }}
     />
     </div>
)

} 导出默认 AppIntro

这是我的组件

【问题讨论】：

显示整个组件
我已经添加了整个组件@yovchokalev

标签： javascript reactjs intro.js

【解决方案1】：

你需要更换

    {
        element:document.getElementById('.card'),
        intro: 'This is the second step',
        position: 'left'
    },
    {
        element: document.querySelector('.tableRow'),
        intro:'This is the third step',
        position: 'top'
    }

有

    {
        element: '.card',
        intro: 'This is the second step',
        position: 'left'
    },
    {
        element: '.tableRow',
        intro:'This is the third step',
        position: 'top'
    }

这将使步骤附加到具有类 .card 和 .tableRow 的元素。如果您想使用 ID 来标识要附加到的元素，可以将 '.card' 替换为 '#card' 以便附加到具有 card id 的元素。

【讨论】：