时间戳

首页 > 解决方案 > 如何在介绍 js 中使用多个组件进行反应

reactjs - 如何在介绍 js 中使用多个组件进行反应

问题描述

我正在为我的项目使用 introjs-react 包，但我面临与多个组件交互的问题.....因为它无法选择一开始没有呈现的元素，但在第二步我在屏幕上渲染组件（通过history.push），但它仍然没有选择它并且显示元素为空。

<Steps
          enabled={enableSteps}
          steps={steps}
          initialStep={initialStep}
          options={{
            showStepNumbers: false,
            showBullets: false,
            exitOnOverlayClick: false,
            doneLabel: "Finish",
            nextLabel: "Next",
            hideNext: true,
            showProgress: true
          }}
          onChange={(index) => changeSteps(index)}
          onStart={index => startSteps(index)}
          onExit={(index) => exitSteps(index)}
      />

这是步骤组件

const changeSteps = (index) => {
    if (index === 2) {
      history.push('/notifications');
    }
  }

在这里，我只是想转到另一个页面通知，该通知最初没有被呈现.....由于选择器不起作用并且没有在通知页面中选择元素

标签： reactjsintro.js

解决方案

我在这上面花了很多时间，但似乎没有合适的解决方案......虽然你可以通过创建对 Steps 组件的引用来解决它，然后你可以通过更改元素

refName.current.introJS.steps[stepIndex].element=document.querySelector(element)

必须在渲染要在其上显示指令的其他组件后完成.....！

推荐阅读