Question

我正在创建一个游戏，其中卡片的初始状态面朝下，点击一张卡片后，卡片的图标就会显示出来。当两张卡匹配时，两张卡都从板上移除。我遇到的挑战是我的条件渲染。当我点击一张卡片时，所有卡片都会显示其图标，而不是每次点击一张。这是codesandbox

我试图将状态保持为尽可能本地的相关组件，并尝试通过不切换类名并直接操作DOM来实现“React”方式。我该如何解决这个问题，并且btnMask类是正确的方法吗？如果我能得到这个，那么在卡上匹配id可能是一个快速实现。这是Card类

class Card extends Component {
    constructor(props) {
    super(props);
    this.state = {
      hidden: true
    };
    this.revealIcon = this.revealIcon.bind(this);
  }

 revealIcon(e) {
    console.log("clicked", e.target.id);
    this.setState({ hidden: false });
  }

  render() {
    const card = this.props.cardsEasy["cards"].map((card, index) => {
      if (this.state.hidden) {
        return (
         <button
            key={card + index}
            style={btn}
            onClick={this.revealIcon}
            id={card}
          >
            <div style={btnMask}>{card}</div>
          </button>
        );
      } else {
        return (
          <button
            key={card + index}
            style={btn}
            onClick={this.revealIcon}
            id={card}
          >
            <div>{card}</div>
          </button>
        );
      }
    });
    return <div style={divContainer}>{card}</div>;
  }
}
export default Card;

Answer 1

你的问题是所有牌都有共同状态。这意味着您有卡片组件，您可以在其中呈现所有卡片。该组件的状态为hidden并呈现一堆卡片。这些卡访问状态中的所有相同变量以检查它们是否应该隐藏。因此，如果您更改该变量，则会显示所有变量。我建议你做的是创建一个组件＆＃34; CardCollection＆＃34;它会呈现卡片。

  class CardCollection extends React.Component {
    render() {
      this.props.cardsEasy["cards"].map((item) => {
        <Card {...item} />
      })
    }
  }

像这样每个CardComponent都有自己的状态。您需要稍微调整一下CardComponent。

除了使用类组件/有状态组件之外，您还可以为CardCollection使用无状态组件，因为集合不需要任何状态，只能用于渲染子项。

  const CardCollection = (props) => {
    return this.props.cardsEasy["cards"].map((item) => {
      <Card {...item} />
    });
  }

有条件地渲染按钮值

1 个答案: