элементы непреднамеренно перемещаются при изменении содержимого - PullRequest
Новая
       7

элементы непреднамеренно перемещаются при изменении содержимого

0 голосов
/ 14 января 2019

Я изучаю React и JavaScript в основном посредством написания шахматной игры и столкнулся с некоторой интересной проблемой, когда элементы меняются в зависимости от того, пуст контент или нет.

Я создаю простой CodePen для иллюстрации проблемы - https://codepen.io/anon/pen/KbGKrX?editors=0010

Нажатие на каждый квадрат изменит его содержание. Проблема заключается в том, что этот квадрат будет менять положение, если только все квадраты в одной строке не имеют одинакового содержимого (ноль или текст). Пробовал с пустыми строками и пробелами вместо нуля и получил то же поведение.

Проверка в 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;
}

1 Ответ

0 голосов
/ 15 января 2019

Причина такого поведения заключается в вертикальном выравнивании базовой линии по умолчанию. Уже хорошо объяснил в этом ответе: https://stackoverflow.com/a/13550706/1790728

Если изменить display на inline-block и установить vertical-align на top, квадраты будут выровнены без пробела.

Рабочий пример: https://codepen.io/anon/pen/MZLZYj

...