В моем основном компоненте Game, который содержит два свойства состояния, а именно массивы карточек, easyCards и hardCards, я визуализирую два компонента Button. Компоненты Button являются презентационными, они просто визуализируют переданную опору. Я пытаюсь выяснить, на основе какой кнопки я нажимаю. Как я могу передать один из двух массивов карт компоненту Card в качестве свойств для их визуализации?

handleEasyCards() {
 }
handleHardCards() {
 }


render() {

return (
  <div>
    <Timer />
    <div>
      <Button difficulty={this.state.easyButton} onClick={this.handleEasyCards}/>
      <Button difficulty={this.state.hardButton} onClick={this.handleHardCards}/>
    </div>

    <Card cardTypes={ // I want to pass a specific state property here} />

  </div>
  );
 }
}

Это должен быть метод onClick или что-то, что можно обработать в методе рендеринга? Codesandbox

2
Kevin T. 12 Апр 2018 в 18:50

1 ответ

Лучший ответ

Вы на правильном пути. Самый простой способ увидеть отсюда это:

handleEasyCards() {
  this.setState({currentCards: this.state.easyCards});
}
handleHardCards() {
  this.setState({currentCards: this.state.hardCards});
}

А затем в рендере:

<Card cardTypes={this.state.currentCards} />

А затем обязательно обработайте рендеринг в компоненте Card, когда currentCards равно undefined, или укажите значение по умолчанию.

Одно предостережение, которое может быть применимо, React оптимизирует нажатие на один и тот же тип карты, поскольку это назначит currentCards одну и ту же ссылку на массив, и он (справедливо) будет думать, что состояние не обновилось. Если вы хотите показать какую-то обратную связь (сбросить карточки, анимацию и т. Д.), Вам нужно будет сделать что-то вроде этого:

this.setState({currentCards: [...this.state.easyCards]});

Создать новый массив, чтобы заставить реагировать на обновление.

1
Nick 12 Апр 2018 в 16:05