ReactJS中的一个打开/关闭子组件

Question

我想在我的React应用程序中创建一个“查看详细信息”按钮，该按钮打开一个子“卡片”组件并具有一个关闭按钮

                <div id="Card1" className='card d-none' >
                    <span className="close" onClick={this.CloseClick} >&times;</span>
                    <p>Some text in the Modal..</p>
                </div>

Answer 1

您需要使用条件渲染。尝试如下操作：

class Card extends React.Component {
  constructor(props) {
   super(props);
   this.state = {
     showCard: false,
   };
   this.toggleCard = this.toggleCard.bind(this);
  }
  toggleCard(){
    const show = this.state.showCard
    this.setState({showCard: !show});
  }
  render() {
    return (
      <div>
        <button onClick={this.toggleCard}>Toggle card</button>
       {this.state.showCard &&
         <div id="Card1" className='card d-none' >
                  <span className="close" onClick={this.CloseClick} >&times;</span>
                  <p>Some text in the Modal..</p>
         </div> 
       }
      </div>
     );
   }
}

当然，代码不是理想的，您将需要根据需要对其进行编辑。另外，您的关闭按钮将实现与我的toggleCard方法类似的功能。