如何将Chessboard.js与Reactjs一起使用？

我一直在研究chessboardjs（）作为一种通过一些React编码进行实践的方法。然而，我还没能得到一个简单的例子，仅仅在我的应用程序中显示板工作。文档说明在HTML中使用

，并且

var board=ChessBoard（'board'，'start'）以获取startet。然而，
棋盘（'board'，'start'）给我一个“对象不是函数”编译错误。我尝试过处理很多不同的事情（比如用jquery标记添加匿名函数），但我似乎做错了什么。我希望有人能发现它

我的React应用程序（使用typescript）有一个标准应用程序组件，它只有一个chesComponent，如下所示：

import * as React from 'react';
import {ChessBoard} from 'chessboardjs';
import * as $ from 'jquery';

class ChessComponent extends React.Component {
    constructor(props:any) {
        super(props);
    }

    componentDidMount() {
        $(function() {
            var board = ChessBoard('board', 'start');
        });
    }

    render() {
        return (
            <div id="board" style={{width: 400}}/>
        )
    }
}

export default ChessComponent

为了防止其他人也有类似的问题，我想我会回到这里，回答我自己的问题

一个技巧是向index.html添加必要的脚本：



这样，jquery和chessboardjs功能都可以在窗口对象上使用。现在您可以调用window.Chessboard来制作棋盘（需要一些设置）

使用reactjs typescript快速设置棋盘JS可能如下所示：

  {
    "name": "chess-app",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
      "chess": "^0.4.1",
      "chessboardjs": "0.0.1",
      "jquery": "^3.4.0",
      "react": "^16.5.2",
      "react-bootstrap": "^0.32.4",
      "react-dom": "^16.5.2",
      "react-scripts-ts": "3.1.0",
      "tslint": "^5.11.0",
      "tslint-react": "^3.6.0"
    },
    "scripts": {
      "start": "react-scripts-ts start --noUnusedParameters=false",
      "build": "react-scripts-ts build",
      "test": "react-scripts-ts test --env=jsdom",
      "eject": "react-scripts-ts eject"
    },
    "devDependencies": {
      "@types/chessboardjs": "^0.3.1",
      "@types/jest": "^23.3.2",
      "@types/jquery": "^3.3.29",
      "@types/node": "^10.11.3",
      "@types/react": "^16.4.14",
      "@types/react-dom": "^16.0.8",
      "typescript": "^3.1.1"
    }
   }


从“React”导入React；
导入“/App.css”；
//在窗口对象上声明jquery有点像黑客。它还可以调用下面的window.chessBoard
声明变量窗口：任意；
window.$=window.jQuery=$；
导出默认类App扩展React.Component{
//请忽略任何类型的大量过度使用
私人董事会参考：任何；
私人棋盘：任何；
私有boardId:string；
private defaultConfig:any；
构造器（道具：任何）{
超级（道具）；
this.boardRef=React.createRef（）；
this.boardId=“board1”；
const themePath=process.env.PUBLIC_URL+'/assets/img/chesspieces/wikipedia/{piece}.png'
this.defaultConfig={
外观速度：25，
真的，
升降板：“快速后退”，
移动速度：25，
方向：'白色'，
位置：'开始'，
淋浴器：“控制台”，
表示法：正确，
快照速度：25，
弹回速度：50，
主题：themePath，
斯帕雷皮耶斯：错，
垃圾速度：25，
};
}
componentDidMount（）{
if（window&！window.ChessBoard）返回
if（window&！window.$）返回
this.chessBoard=window.chessBoard（this.boardId，this.defaultConfig）；
}
组件将卸载（）{
这个.chessBoard.destroy（）；
}
render（）{
返回(
); 
} 
}

但是，如果您正在考虑将Chessboard.js与React一起使用，我建议您看看Simon Ansells React ChessboardJs包装器：

这也使得在你的黑板上添加促销对话变得容易

如果您正处于与其他库集成React的类似困境中，我还建议您阅读他们关于该主题的文档，而我最初不知怎么错过了：




如果你想用reactjs构建一个棋盘，我认为这是一个不错的选择。它为你提供了一个棋盘组件，你可以通过不同的道具来定制棋盘。以下是一个示例开始位置：

<Chessboard position="start"/>