javascript - 从按钮onclick调用函数不起作用 react js

Question

我是 javascript 的新手，正在尝试解决这个问题。每次单击按钮时，我都试图让 renderNewCard() 中的 div 结构出现在页面上。当我调用一个只有警告消息的函数时，该按钮似乎可以工作，但当我调用此方法并尝试输出 div 结构时，它什么也不做。我附上了 div 结构的图片以及单击按钮时应添加的内容。在渲染中，不用担心那些工作正常的着陆器和身份验证方法。我在使用 div 结构调用函数时产生我想要的输出的按钮有问题。我可能会遗漏一些东西，但不完全确定。任何帮助/建议表示赞赏。

.Home .newObjects {
  height: 130px;
  padding-top: 81px;
}

.Home .newObjects button {
  border-width: 2px;
  border-color: rgb(98, 98, 98);
  border-style: solid;
  border-radius: 6px;
  background: rgb(255, 255, 255);
  box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.18);
  width: 72px;
  height: 100%;
  margin-left: 72%;
  font-weight: bold;

}
.Home .newObjects button:focus {
  outline: none;
}
.card {
  min-height: 310px;

}

.scroll-box {
  overflow-y: scroll;
  height: 310px;
  padding: 1rem;

}

.card-border{
 border-style: solid;
  border-width: 2px;
  margin-top: 50px;
  box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.18);
}

import React, {Component} from "react";
import "./Home.css";
import {ControlLabel, FormControl, FormGroup} from "react-bootstrap";



export default class Home extends Component {


  renderNewObjectsButton() {

    return (
        <div className="newObjects">
            <button onClick={()=>this.renderNewCard()}>New</button>


        </div>
    )

  }


  render() {
    return (
        <div className="Home">
          {this.props.isAuthenticated ? [this.renderNewObjectsButton()]
              : this.renderLander() }

        </div>
    );
  }

renderNewCard(){
    


        return(
            <div className="row" id="container">
                <div className="card-border" >
                    <div className="card">
                        <div className="card-body">
                            <a href="#" className="btn-customer">Customer</a>
                        </div>
                        <div className="card-body">
                            <a href="#" className="btn-vehicle">Vehicle</a>
                        </div>
                        <div className="card-body">
                            <a href="#" className="btn-transaction">Transaction</a>
                        </div>
                    </div>
                </div>
            </div>


            );


     }

}

enter image description here

Answer 1

 <button onClick={() => { this.setState({ show: true })}}>{this.state.show &&this.renderNewCard()}</button>