javascript - Intro.js 的 React 包装器未识别元素
问题描述
我正在为 intro.js 使用反应包装器。我正在尝试将其集成到功能组件中。这些步骤工作正常,但 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
这是我的组件
解决方案
你需要更换
{
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”,以便附加到带有卡片 ID 的元素。
推荐阅读
- c++ - 如何从 strcpy 函数返回一个 char* 数组并将其存储在另一个 char* 数组中?
- python - 如何在打开交互模式的情况下更新 ipywidget 中的 matplotlib 图?
- discord.js - Discord.js 读取消息中的字段
- javascript - useEffect 不会在它“监听”的对象发生变化时触发
- sql - SQL 将多个 ID 传递给单个参数
- json - 如何防止我的对象的某些字段被类转换器转换
- r - 如何创建许多变量,这些变量取决于 R 中的多个条件(类似于 SAS 中的数组函数)
- jacoco - 我怎样才能让 Jacoco 代码扫描忽略分支条件 InterruptedException,它已知会按预期运行?
- c++ - 如何修复“E0349 没有运算符匹配这些操作数”错误?
- json - 使用 Go 删除 JSON 字符串的第一个字段