有條件地呈現按鈕的內容

Question

我正在做一個記憶游戲CodeSandbox ，我正在嘗試完成以下任務：

1. 使最初要發行的卡面朝下（可以說是隱藏圖標）
2. onClick，顯示被點擊的卡片上的圖標，不顯示其他圖標
3. 單擊第二張卡時，將顯示該圖標，如果它們匹配，則無論如何都將其刪除（該部分有效），但如果不匹配，則圖標將再次隱藏。

我嘗試在父div中添加“ buttonMask”類，但它覆蓋了我現有的類。 我試過顯示：父div也沒有，也沒有運氣。

其他嘗試包括向Card.js組件this.state.isHidden：true添加state屬性，並嘗試切換可見性。 我閱讀了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

如果使用邏輯&&，則可以有條件地使用內聯呈現元素：

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