Как я могу получить аккуратный макет шахматной доски? реагировать DnD и Javascript

Question

Я решил следовать следующему уроку React DnD: http://react -dnd.github.io / Reaction-dnd / docs / tutorial

Пока я следовалбуквально процесс, код успешно скомпилирован и запущен, однако я не получаю ожидаемых результатов.Интересно, не могли бы вы помочь мне найти способ решить это?

Кажется, что это только квадрат, на котором расположен конь, а не полная шахматная доска на 64 квадрата.

Если честно, сейчас я также изучаю React.Я думал, что это проблема с браузером, но я получил те же результаты с Chrome и Mozilla.

Это код для доски

import React from 'react'
import Square from './Square'
import Knight from './Knight'

function renderSquare(i, [knightX, knightY]) {
  const x = i % 8
  const y = Math.floor(i / 8)
  const isKnightHere = x === knightX && y === knightY
  const black = (x + y) % 2 === 1
  const piece = isKnightHere ? <Knight /> : null

  return (
    <div key={i} style={{ width: '12.5%', height: '12.5%' }}>
      <Square black={black}>{piece}</Square>
    </div>
  )
}

export default function Board({ knightPosition }) {
  const squares = []
  for (let i = 0; i < 64; i++) {
    squares.push(renderSquare(i, knightPosition))
  }

  return (
    <div
      style={{
        width: '100%',
        height: '100%',
        display: 'flex',
        flexWrap: 'wrap',
      }}
    >
      {squares}
    </div>
  )
}

Вот так выглядит мой index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';
import Knight from "./Knight";
import Square from './Square';
import Board from './Board'

ReactDOM.render(<Knight />, document.getElementById('root'));
ReactDOM.render(
    <Square black>
      <Knight/>
    </Square>,
    document.getElementById('root'),
)

ReactDOM.render(
  <Board knightPosition={[7, 4]} />,
  document.getElementById('root'),
)

Square.js

import React from 'react'

  export default function Square({ black, children }) {
    const fill = black ? 'black' : 'white'
    const stroke = black ? 'white' : 'black'

    return (
      <div
        style={{
          backgroundColor: fill,
          color: stroke,
          width: '100%',
          height: '100%',
        }}
      >
        {children}
      </div>
    )
  }