什么是 React dnd 上下文中的 BackendFactory？答案

【问题标题】：What is BackendFactory in context of react dnd?什么是 React dnd 上下文中的 BackendFactory？
【发布时间】：2022-07-19 03:51:42
【问题描述】：

我正在尝试实现react-chessboard 组件。我想要一个包含空棋盘的页面，并将棋子保留在外面，供用户将它们拖放到棋盘中。默认情况下，板设置为起始位置。在 react-chessboard 文档中，我遇到了一个名为“customDndBackend”的道具，它采用 BackendFactory 类型的值。我在任何地方都找不到它，所以我在这里问了它。任何帮助，将不胜感激。 react-chessboard-npm page

<Chessboard
                className={classes.board}
                boardWidth={
                    window.screen.width < 600 ? 0.9 * window.screen.width : 560
                }
                arePiecesDraggable={true}
                // position={'start'}
                animationDuration={200}
                customBoardStyle={{
                    borderRadius: '4px',
                    boxShadow: '0 5px 15px rgba(0, 0, 0, 0.5)',
                }}
                customDarkSquareStyle={{ backgroundColor: '#A1B57D' }}
                customLightSquareStyle={{ backgroundColor: '#F7F7EE' }}
                customPieces={customPieces()}
                ref={chessboardRef}
            />

【问题讨论】：

标签： reactjs react-dnd

【解决方案1】：

我实际上是这个包的作者，所以也许我可以帮忙。

该包使用react-dnd 来处理拖放。这带有不同的“后端”，用于处理移动设备或浏览器上的拖放操作。

react-chessboard 有自己的逻辑来尝试自动为您加载正确的后端。但是如果你想用你自己的覆盖它，或者设置一个特定的，你可以使用 prop 自己传递它。这就是它的全部内容，这是包中使用的一些代码以供更多参考。

const backend = customDndBackend || (isMobile ? TouchBackend : HTML5Backend);

【讨论】：