Назначьте другое значение prop на каждой итерации в .map - PullRequest
Новая
       77

Назначьте другое значение prop на каждой итерации в .map

1 голос
/ 18 июня 2020

Я создал таблицу, которая в конечном итоге возвращает 5 строк и 5 столбцов.

Для каждой ячейки я хочу иметь случайное количество ячеек другого цвета при загрузке страницы, однако на данный момент все ячейки остаются того же цвета.

Я хочу, чтобы свойство isLit было true или false на каждой итерации для каждой ячейки, это определит, будет ли ячейка другого цвета или нет.

Есть какие-нибудь советы, как это сделать? 

static defaultProps = {
  nrows: 5,
  ncols: 5,
  chanceLightStartsOn: 0.25,
};

// [...]

render() {
  const isLit = this.props.chanceLightStartsOn > Math.random();

  const mainBoard = Array.from({ length: this.props.nrows }).map(() => (
    <tr>
      {Array.from({ length: this.props.ncols }).map((x, index) => (
        <Cell isLit={isLit} />
      ))}
    </tr>
  ));

  return (
    <table className="Board">
      <tbody>
        <h1>BOARD</h1>
        {mainBoard}
      </tbody>
    </table>
  );
}

Cell. js

class Cell extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(evt) {
    // call up to the board to flip cells around this cell
    this.props.flipCellsAroundMe();
  }

  render() {
    let classes = "Cell" + (this.props.isLit ? " Cell-lit" : "");

    return <td className={classes} onClick={this.handleClick} />;
  }
}

1 Ответ

2 голосов
/ 18 июня 2020

В настоящее время вы оцениваете this.props.chanceLightStartsOn > Math.random() только один раз и передаете одно и то же значение isLit всем компонентам Cell.

Что вам нужно сделать, так это проверить, больше ли this.props.chanceLightStartsOn, чем Math.random() внутри функции .map(), чтобы случайное число генерировалось на каждой итерации.

Измените 

<Cell isLit={isLit} />

на 

<Cell isLit={this.props.chanceLightStartsOn > Math.random()} />
...