我怎样才能得到一个整洁的棋盘布局？反应 DnD 和 javascript

Question

我决定学习下一个 React DnD 教程： http://react-dnd.github.io/react-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>
    )
  }

Answer 1

本教程从不明确设置板的边界。

在 index.js 中，将样式属性添加到包装 Board 状态的 div 中。

observe((knightPosition) =>
  ReactDOM.render(
    <div style={{ width: "500px", height: "500px" }}>
      {" "}
      <Board rookPosition={knightPosition} />
    </div>,
    root
  )
);