Reactjs 是否有方法将组件引用存储在状态中？或是一个更；react-y“；可供替代的

我正在编写一个“配对”游戏，需要在父状态下存储两个单击的卡片组件的参考，以便在单击第三张卡片时可以“翻转”它们。是否有方法将引用存储在可访问的状态中

因此，我有一个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;

是否有方法将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>

类游戏扩展组件{
建造师（道具）{
超级（道具）；
this.a1=React.createRef（）；
this.a2=React.createRef（）；
this.a3=React.createRef（）；
this.a4=React.createRef（）；
//等
此。状态={
左手：''，
右手：''，
};
}
setLeftHand=（卡片）=>{
这是我的国家({
左手牌
})
}
setRightHand=（卡）=>{
这是我的国家({
右手：卡片
})
}
render（）{
返回(

（想象还有3排像这样的…）

)
}
}
类卡扩展组件{
handleclick（）{
//如果这是第一张抽出的卡片，请将卡片添加到EFTHAND
}
addcardtoleffhand（）{
此.props.setlh（此.ref）；
}
render（）{
if（此.state.backShowing）{
退货（XXXXXXXXXX）
}否则{
返回（{this.props.cardd}）
}
}
}

例如，我希望能够对存储在this.state.lefthand中的引用运行一个方法，然后再次对this.state.righHand运行一个方法

基本上，我对伪代码表示歉意，但我真的很想将其简化以进行演示

---

我只想从卡组件中添加卡到EFTHAN并使其工作。我是否遗漏了一些明显的内容？

将整个游戏状态存储在

game

组件中，包括单个卡的状态。您不应该使用对组件的引用来存储任何状态，而应该使用标识符。您可以将

onClick

回调添加到

Card

组件中，这样单击事件就可以转发到

游戏

。然后，在

游戏.handleCardClick

中，您可以根据以前的游戏状态和单击事件计算新的游戏状态。此外，您当前管理卡的方法是手动的，并且容易出错；考虑使用一个二维数组来存储你的卡，并动态地生成<代码>卡< /C>组件。< / P>是的，我知道我管理单个卡的方式是有点小马，这是我可以把每一个RIF都放在那里的唯一方法。我会试试看，然后马克解决了！非常感谢。你说得对，我又开始了，在游戏中存储游戏状态，并以编程方式创建卡。这使得事情变得简单多了。这是一种非常“jquery”的思维方式，尝试在将存储符号状态“isFlipped”的变量中思考，然后将此状态与“受控组件”子级一起使用，以处理如何查看和更改此状态。

          </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>)
    }
  }
}