Question

我在我的项目中使用了React Joyride。我展示了一个与此代码匹配的简单教程

<Tutorial
        steps={[
          {
            target: `body`,
            title: `New on the website ? `,
            content: `To see how the website works, let's get started`,
            locale: {
              next: `Start`, skip: `Skip`
            },
            disableBeacon: true,
            placement: `center`
          },
          {
            target: `#search-block .wrapper-city`,
            content: `Give us information about the city`,
            placement: `top`,
            disableBeacon: true
          },
          {
            target: `#search-block .wrapper-date-range`,
            content: `Tell us the period`,
            placement: `top`
          },
          {
            target: `#search-block .wrapper-activity-type`,
            content: `Tell us the activity you would like to practice`,
            placement: `top`
          },
          {
            target: `#search-block button.btn-green`,
            content: `Finally click search `,
            placement: `top`
          }
        ]}
        joyrideProps={{ disableScrolling: true }}
        callback={(data) => {
          console.log(data);
        }}
      />

使用本教程时，在第一步时，我单击十字架以关闭教程，然后转到第二步...但是我想使该十字架消失或当我们在教程中单击该十字架时停止，但不被忽略。有谁知道如何避免这种行为的任何线索？

在此poc上也会发生相同的行为-> https://codesandbox.io/s/github/gilbarbara/react-joyride-demo

任何线索将不胜感激=）

Answer 1

0

我认为您已经自己解决了这个问题。但是，如果有人可能遇到相同的问题，此答案可能会有所帮助。 react-joyride当前的行为是关闭模式，但实际上杀死了该实例。

因此，在我的情况下，我通过定义可切换ReactJoyride的redux状态解决了该问题。

def get_parallel_db(db, remove_index):
    return torch.cat((db[0:remove_index], 
                      db[remove_index+1:]))

def get_parallel_dbs(db):

    parallel_dbs = list()

    for i in range(len(db)):
        pdb = get_parallel_db(db, i)
        parallel_dbs.append(pdb)

    return parallel_dbs

def create_db_and_parallels(num_entries):

    db = torch.rand(num_entries) > 0.5
    pdbs = get_parallel_dbs(db)

    return db, pdbs

def flip_coin():    
    coin = torch.rand(2) > 0.5 # 1 for heads and 0 for tails
    return coin.float()

def decide_db(n_entries):

    db, _ = create_db_and_parallels(n_entries)
    db = db.float()
    print(db)

    for entry in db:
        coin = flip_coin()
        print("coins:" , coin[0], coin[1])
        if coin[0] == 0:
            print("coin1:" , coin[1])
            #db[entry==entry] = coin[1]
        else: 
            print("entry" , entry)
            #db[entry==entry] = entry
    return db

decide_db(10)

我改写了回调函数，并用它来调度更改显示Joyride道具的动作。这样，当我们将props更改为false时，ReactJoyride将不可见。

仅供参考： action ==='close'将有助于检查是否单击了十字图标。

react-joyride-单击十字架时如何关闭教程？

1 个答案: