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;

有没有一种方法可以存储ref以便以后使用？

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。

基本上，对伪代码表示歉意，但我确实想简化此过程以进行演示。

我只希望Card组件中的addCardToLeftHand起作用。我缺少明显的东西吗？

Answer 1

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

有没有一种方法可以将组件引用存储在状态中？还是更具“反应性”的替代方案？

1 个答案: