如何获得整齐的棋盘布局？反应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中，将style属性添加到包装Board状态的div中。

EnableDelayedExpansion