Как использовать Chessboard.js с Reactjs? - PullRequest
Новая
       34

Как использовать Chessboard.js с Reactjs?

2 голосов
/ 21 апреля 2019

Я немного посмотрел на chessboardjs (https://chessboardjs.com/) как способ немного попрактиковаться в некотором кодировании React. Однако я не смог получить простой пример простого показа доски вмое приложение работает. В документации сказано, что <div id="board" style={{width: 400}}/> в HTML и 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"
    }
   }
...