如何在Reactjs中使用Chessboard.js？

Question

我一直在研究棋盘( chessboardjs，https://chessboardjs.com/)，这是一种通过一些反应编码进行一些练习的方法。然而，我还没有得到一个简单的例子，就是在我的应用程序中显示板的工作情况。文档中说在HTML中使用<div id="board" style={{width: 400}}/>，使用var board = ChessBoard('board', 'start');获取星体。然而，ChessBoard('board', 'start');给出了一个“对象而不是函数”编译错误。我尝试了很多不同的东西(比如用jquery标记添加匿名函数)，但我似乎做错了什么。我希望有人能发现它。

我的React应用程序(使用类型记录)有标准的app组件，它只有一个ChessComponent，其外观如下：

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

我的package.json看起来是这样的：

  {
    "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"
    }
   }

Answer 1

万一其他人正在为类似的问题而挣扎，我想我会回到这里回答我自己的问题。

一个诀窍是向index.html添加必要的脚本：

<script src="https://code.jquery.com/jquery-2.1.4.js"></script> <script src="https://unpkg.com/@chrisoakman/chessboardjs@1.0.0/dist/chessboard-1.0.0.min.js" integrity="sha384-8Vi8VHwn3vjQ9eUHUxex3JSN/NFqUg3QbPyX8kWyb93+8AC/pPWTzj+nHtbC5bxD" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://unpkg.com/@chrisoakman/chessboardjs@1.0.0/dist/chessboard-1.0.0.min.css" integrity="sha384-q94+BZtLrkL1/ohfjR8c6L+A6qzNH9R2hBLwyoAfu3i/WCvQjzL2RQJ3uNHDISdU" crossorigin="anonymous">

这样，jquery和chessboardjs功能都可以在窗口对象上使用。现在，您可以调用window.Chessboard来制作板(只需一点设置)。

使用reactjs类型记录快速设置棋盘可能如下所示：

import React from 'react';
import './App.css';

// This is a bit of a hack to declare jquery on the window object. It also makes it possible to call window.chessBoard further below
declare var window : any; 
window.$ = window.jQuery = $;

export default class App extends React.Component {

  // Please disregard the massive overuse of the any type here
  private boardRef: any;
  private chessBoard: any;
  private boardId: string;
  private defaultConfig: any;

  constructor(props: any) {
    super(props);
    this.boardRef = React.createRef();
    this.boardId = "board1";
    const themePath = process.env.PUBLIC_URL + '/assets/img/chesspieces/wikipedia/{piece}.png'

    this.defaultConfig = {
      appearSpeed: 25,
      draggable: true,
      dropOffBoard: 'snapback',
      moveSpeed: 25,
      orientation: 'white',
      position: 'start',
      showErrors: 'console',
      showNotation: true,
      snapSpeed: 25,
      snapbackSpeed: 50,
      pieceTheme: themePath,
      sparePieces: false,
      trashSpeed: 25,
    };
  }


  componentDidMount() {
    if (window && !window.ChessBoard) return
    if (window && !window.$) return

    this.chessBoard = window.ChessBoard(this.boardId, this.defaultConfig);
  }

  componentWillUnmount() {
    this.chessBoard.destroy();
  }

  render() {
    return (
      <div className="App">
        <div id={this.boardId} style={{width: "400px"}} ref={this.boardRef}></div>
      </div>
      ); 
    } 
  }

但是，如果您正在使用Chessboard.js和React，我建议您看看Simon ChessboardJs-Wrapper：https://github.com/ginger-gm/react-chessboardjs-wrapper

这也使得你很容易在你的董事会中添加促销对话。

如果您正处于与其他库集成的类似困境中，我还建议您阅读有关这个主题的文档，而我最初忽略了这一点：

• https://reactjs.org/docs/integrating-with-other-libraries.html
• https://reactjs.org/docs/refs-and-the-dom.html

Answer 2

如果你想用reactjs构建一个棋盘，我会说棋盘是最好的选择。它为您提供棋盘组件，您可以通过不同的道具定制板。下面是一个示例开始位置：

<Chessboard position="start"/>

​

​