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

我决定学习React DnD的下一个教程：

到目前为止，我完全遵循了流程，代码成功编译并运行，但是，我没有得到预期的结果。我想知道你是否能帮我找到解决这个问题的方法

似乎只有骑士所在的方格显示，而不是完整的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>
  )
}

从“React”导入React
从“./Square”导入方形
从“./骑士”导入骑士
函数renderSquare（i，[knightX，knightY]）{
常数x=i%8
常数y=数学楼层（i/8）
const isKnightHere=x==knightX&&y==knightY
常数黑=（x+y）%2==1
常量块=isKnightHere？：null
返回(
{piece}
)
}
导出默认功能板（{knightPosition}）{
常数平方=[]
for（设i=0；i<64；i++）{
正方形。推（渲染正方形（i，骑士位置））
}
返回(
{squares}
)
}

这就是我的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'),
)

从“React”导入React；
从“react dom”导入react dom；
导入“./index.css”；
将*作为serviceWorker从“/serviceWorker”导入；
从“/Knight”导入骑士；
从“./Square”导入正方形；
从“./板”导入板
ReactDOM.render（，document.getElementById（'root'））；
ReactDOM.render(
,
document.getElementById（'root'），
)
ReactDOM.render(
,
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>
    )
  }

从“React”导入React
导出默认函数方块（{黑色，子项}）{
常量填充=黑色？“黑色”：“白色”
常量笔划=黑色？“白色”：“黑色”
返回(
{儿童}
)
}

本教程从未明确设置电路板的边界

在index.js中，向包装线路板状态的div添加样式属性

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

观察（（骑士位置）=>
ReactDOM.render(
{" "}
,
根
)
);

本教程从未明确设置电路板的边界

在index.js中，向包装线路板状态的div添加样式属性

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

观察（（骑士位置）=>
ReactDOM.render(
{" "}
,
根
)
);

代码中的渲染器也仅显示骑士所在的骑士和磁贴。将其与显示所有电路板的教程进行比较。IDK，试着先展示棋盘，然后去找骑士。另外，您还没有添加kight.js和board.js中的代码。代码中的渲染器也只显示骑士所在的骑士和磁贴。将其与显示所有电路板的教程进行比较。IDK，试着先展示棋盘，然后去找骑士。另外，您还没有添加kight.js和board.jsI中的代码，我很难理解您的问题。您的问题是线路板组件扩展到包含div的外部吗？什么是“教程”？我很难理解你的问题。您的问题是线路板组件扩展到包含div的外部吗？什么是“教程”？