有没有办法将组件引用存储在状态中？或者一个更“react-y”的替代方案？

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 能够工作。我错过了一些明显的东西吗？

Answer 1

将整个游戏状态存储在Game组件中，包括各个卡牌的状态。您不应使用对组件的引用来存储任何状态，而应使用标识符。onClick您可以向组件添加回调Card，以便将单击事件转发到Game. 然后，Game.handleCardClick您可以根据之前的游戏状态和点击事件计算新的游戏状态。此外，您当前管理卡的方法是手动的并且容易出错；考虑使用二维数组来存储卡片并Card动态生成组件。