Question

我正在制作记忆游戏，CodeSandbox，我正在努力完成以下任务：

最初面朝下发牌（图标隐藏可以说）
onClick，显示点击的卡上的图标，其他任何一个都没有显示
当点击第二张卡时，该图标被显示，如果匹配，则无论如何都会删除这些卡（该部分有效），但如果他们没有，则会再次隐藏图标。

我尝试添加＆＃34; buttonMask＆＃34;父div中的类，但它会覆盖我现有的类。我试过显示：父div中也没有，没有运气。

其他尝试包括向Card.js组件添加状态属性this.state.isHidden：true并尝试切换可见性。我阅读了文档This，SO和eddyerburgh。我坚持这种情况渲染，其他一切都很好，这件事让我

这是我处理卡片的条件

class Cards extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    const card = (
      <div style={sty}>
        {this.props.cardTypes ? (
          this.props.cardTypes.map((item, index) => {
            return (
              <button style={cardStyle} value={item} key={index}>
                {" "}
                {item}{" "}
              </button>
           );
         })
        ) : (
          <div> No Cards </div>
        )}
      </div>
    );
    return <Card card={card} removeMatches={this.props.removeMatches} 
   />;
 }

最初，当我第一次尝试这个时，我将状态传递给所有卡片，而不仅仅是个人卡片，这就是为什么我无法单独切换它们的原因。

这是Cards.js中的原始渲染

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

Answer 1

如果使用逻辑＆amp;＆amp;：

，您可以有条件地使用内联渲染元素

return(
  <div>
    {this.props.shouldRenderTheThing && 
    <span>Conditionally rendered span</span>}
  </div>
);

有条件地渲染按钮的内容

1 个答案: