有没有办法将组件引用存储在状态中？还是更“反应”的选择？

Question

我正在编写一个“配对”游戏，并且需要将两个点击的卡片组件的 refs 存储在父状态中，以便在点击第三张卡片时将它们“翻转”回来。有没有办法以可访问的状态存储 refs？

所以我有一个 4x4 网格 16 张卡片，我首先尝试为每张卡片（a1、a2、a3、a4、b1 等）创建一个参考，并将这些参考传递给组件。这适用于在这些组件上运行方法，但仅当我显式键入引用时，例如翻转（this.a1.current）。

但是，我不能将该引用存储在其他任何地方，所以我不能在

的父级中拥有状态

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

有没有办法将 ref 存储在 state 中以供以后使用？

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 组件中，包括各个卡片的状态。您不应该使用对组件的引用来存储任何状态，而是使用标识符。可以给Card组件添加onClick回调，这样点击事件就可以转发到Game。然后，在Game.handleCardClick 中，您可以根据之前的游戏状态和点击事件计算新的游戏状态。此外，您目前管理卡片的方法是手动且容易出错；考虑使用二维数组来存储您的卡片并动态生成Card 组件。