Question

我通常是通过写象棋游戏来学习React和JavaScript的，并且遇到了一些有趣的问题，即根据内容是否为空来改变元素的位置。

我创建了简单的CodePen来说明问题-https://codepen.io/anon/pen/KbGKrX?editors=0010

单击每个方块将更改其内容。问题是，除非同一行中的所有正方形都具有相同的内容（空或文本），否则该正方形将改变位置。尝试使用空字符串和空格而不是null来获得相同的行为。

在Dev Tools中进行检查我没有看到CSS的变化，所以我很困惑，不确定是由于React还是其他原因造成的奇怪行为。

在此方面的任何帮助，我将不胜感激。

JS部分：

const BoardSquare = (props) => {
  return (
      <button
        className={`board-square board-square-${props.squareColor}`}
        onClick={props.onClick}
      >
        {props.piece}
      </button>
  );
};

const squares = new Array(8);
for (let i = 0; i < 8; i++) {
  let row = new Array(8);
  for (let j = 0; j < 8; j++) {
    row[j] = {
      rowIndex: i,
      colIndex: j,
      key: (j + 10).toString(36) + (8 - i).toString(),
      color: (i + j) % 2 === 0 ? "light" : "dark",
      piece: i === 1 ? j : null
    };
  }
  squares[i] = row;
}

class Game extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      squares: squares,
      whiteMove: true
    };
  }

  handleClickSquare(i, j) {
    //alert("clicked:" + i + " " + j);
    const squares = this.state.squares.slice();
    squares[i][j].piece = squares[i][j].piece !== null ? null : j;
    this.setState({ squares: squares, whiteMove: !this.state.whiteMove });
  }

    handleClickNewGame() {
    const squares = this.state.squares.slice();
    for (let i = 0; i < 8; i++) {
      squares[1][i].piece = i;
      squares[6][i].piece = i;
    }

    this.setState({ squares: squares, whiteMove: true });
  }



  render() {
    return (
          <div id="board">
            {this.state.squares.map((row, rowIndex) => {
              return (
                <div>{
                row.map((square, colIndex) => {
                return (
                  <BoardSquare
                    key={square.key}
                    squareColor={square.color}
                    id={square.key}
                    piece={square.piece}

                    onClick={() => this.handleClickSquare(rowIndex, colIndex)}
                  />
                );
              })}
              </div>)
            })}
          </div>
    )
  }
}

// ========================================

ReactDOM.render(
  <Game />,
  document.getElementById('root')
);

CSS：

#board {
    font-size: 0;  
}

.board-square {
    text-align: center;
    align-items: center;
    justify-content: center;
    height: 20px;
    width: 20px;
    line-height: 20px;
    font-size: 10px;
    margin: 0;
    padding: 0;
    border: 0;
}

.board-square-dark {
    background-color: green;
}

.board-square-light {
    background-color: #E0AB76;
}

Answer 1

此行为的原因是由于默认基线垂直对齐。这个答案已经很好地解释了：https://stackoverflow.com/a/13550706/1790728

通过将d1=78.32 d2=3.95更改为display并将inline-block设置为vertical-align，将在不使用空格的情况下对齐正方形。

工作示例：https://codepen.io/anon/pen/MZLZYj

元素在内容更改上无意移动

1 个答案: