使用react-xarrows水平滚动

Question

我正在创建一个水平滚动的 div，其中包含按钮等元素，并使用 React-xarrows 来连接这些元素。 但是当我滚动 div 时。按钮正在移动，但箭头卡在渲染的位置。 我知道我必须对渲染箭头所依赖的元素调用 useXarrows() ，但我无法在按钮上调用所述钩子，因为我使用地图回调函数调用它们。 这个问题有解决办法吗？

这是我的代码

<div className="row w-100" style={{ overflowX: "auto" }}>
          <div
            style={{
              display: "inline-block",
              textAlign: "center",
              whiteSpace: "nowrap",
            }}
            onLoad={useXarrow()}
          >
            {array.map((e, index) => {
              if (index + 1 < array.length) {
                return (
                  <>
                    <Xwrapper>
                      <button
                        type="button"
                        className="btn version-button"
                        value={e}
                        id={e}
                        //   style={{}}
                        onLoad={updateXarrow}
                      >
                        {e}
                      </button>

                      <Xarrow
                        key={index}
                        start={e}
                        end={array[index + 1]}
                        color="black"
                        path="smooth"
                        headSize={3}
                        dashness={true}
                        strokeWidth={2}
                      />
                    </Xwrapper>
                  </>
                );
              } else {
                return (
                  <button
                    type="button"
                    className="btn version-button"
                    value={e}
                    id={e}
                    //   style={{}}
                  >
                    {e}
                  </button>
                );
              }
            })}
          </div>
        </div>

Answer 1

我最近也遇到了同样的问题。对我有用的解决方案是将箭头包装在具有相对位置的 div 中，您可以使用

divContainerStyle

属性来实现此目的。这是一个示例：

<Xarrow
  start={start}
  end={end}
  divContainerStyle={{ position: "relative" }}
/>