Есть ли способ сохранить ссылку на компонент в состоянии?Или более "реагирующая" альтернатива?

Question

Я пишу "парную" игру, и мне нужно хранить ссылки двух компонентов карты, по которым щелкнули, в родительском состоянии, чтобы я мог "перевернуть" их снова при нажатии третьей карты. Есть ли способ хранить ссылки в состоянии, которое будет доступно?

Итак, у меня есть сетка 4x4 на 16 карт, и я сначала попытался создать ссылку для каждой из карт (a1, a2, a3, a4, b1 и т. Д.) И передать эти ссылки компонентам. Это прекрасно работает для запуска методов на этих компонентах, но только когда я явно набираю ссылку, например, flip (this.a1.current).

Однако я не могу сохранить эту ссылку где-либо еще, поэтому у меня не может быть состояния в родительском элементе

class Game extends Component {
  constructor(props) {
    super(props);
    this.state= {
     lefthand: this.a1.current;

Есть ли способ сохранить ссылку в состоянии для последующего использования?

class Game extends Component {

  constructor(props) {
    super(props);
    this.a1= React.createRef();
    this.a2= React.createRef();
    this.a3= React.createRef();
    this.a4= React.createRef();
    //etc
    this.state= {
      leftHand: '',
      rightHand: '',
    };
  }

  setLeftHand = (card) => {
    this.setState ({
      leftHand: card
    })
  }

  setRightHand = (card) => {
    this.setState ({
      rightHand: card
    })
 }


  render() {
    return (
      <div className="Game">
        <table>
          <tbody>
            <tr>
              <Card setlh={this.setLeftHand}
                    ref={this.a1}
                    setrh ={this.setRightHand}
                    lh={this.state.leftHand}
                    rh={this.state.rightHand}
                    cardID={this.state.deck[0]}/>
              <Card setlh={this.setLeftHand}
                    ref={this.a2}
                    setrh ={this.setRightHand}
                    lh={this.state.leftHand}
                    rh={this.state.rightHand}
                    cardID={this.state.deck[1]}/>
              <Card setlh={this.setLeftHand}
                    ref={this.a3}
                    setrh ={this.setRightHand}
                    lh={this.state.leftHand}
                    rh={this.state.rightHand}
                    cardID={this.state.deck[2]}/>
              <Card setlh={this.setLeftHand}
                    ref={this.a4}
                    setrh ={this.setRightHand}
                    lh={this.state.leftHand}
                    rh={this.state.rightHand}
                    cardID={this.state.deck[3]}/>
            </tr>

(представьте себе еще 3 таких ряда ...)

          </tbody>
        </table>
      </div>
    )
  }
}

class Card extends Component {

  handleclick() {
    //if this is the first card drawn, addCardToLeftHand
  }

  addCardToLeftHand() {
    this.props.setlh(this.ref);
  }


  render() {
    if(this.state.backShowing) {
      return (<td onClick={this.handleclick}>xxxxxxxxxxx</td>)
    } else {
      return (<td onClick={this.handleclick}>{this.props.cardID}</td>)
    }
  }
}

Я хочу иметь возможность, например, запустить метод для ссылки, хранящейся в this.state.lefthand, а затем снова для this.state.righthand.

В основном, извинения за псевдокод, но я действительно хотел сильно упростить это, чтобы продемонстрировать.

Я просто хочу, чтобы addCardToLeftHand из компонента Card работал. Я что-то упускаю из виду?

Answer 1

Сохранение всего состояния игры в компоненте Game, включая состояние отдельных карт.Вы не должны хранить какое-либо состояние, используя ссылки на компоненты, вместо этого используйте идентификаторы.Вы можете добавить обратный вызов onClick к компоненту Card, чтобы событие click могло быть перенаправлено на Game.Затем в Game.handleCardClick вы можете вычислить новое игровое состояние на основе предыдущего игрового состояния и события щелчка.Кроме того, ваш текущий подход к управлению картами является ручным и подвержен ошибкам;рассмотрите возможность использования двумерного массива для хранения ваших карт и динамического генерирования Card компонентов.