Javascript 从按钮onclick调用函数不工作

我是javascript新手，正在努力解决这个问题。我试图让renderNewCard（）中的div结构在每次单击按钮时都显示在页面上。当我调用一个只包含一条警报消息的函数时，该按钮似乎起作用，但当我调用此方法并尝试输出div结构时，该按钮不起作用。我附上了一张div结构的图片，以及单击按钮时应该添加的内容。在渲染中，不要担心着陆器和认证方法，因为它们可以很好地工作。我在使用div结构调用函数时遇到了按钮生成输出的问题。我可能遗漏了什么，但不完全确定。欢迎提供任何帮助/建议

.Home.newObjects{
高度：130像素；
填充顶部：81px；
}
.Home.newObjects按钮{
边框宽度：2倍；
边框颜色：rgb（98,98,98）；
边框样式：实心；
边界半径：6px；
背景：rgb（255、255、255）；
盒影：0px 0px 9px 0px rgba（0,0,0,0.18）；
宽度：72px；
身高：100%；
左缘：72%；
字体大小：粗体；
}
.Home.newObjects按钮：焦点{
大纲：无；
}
.卡片{
最小高度：310px；
}
.滚动框{
溢出y：滚动；
高度：310px；
填充：1rem；
}
.卡边框{
边框样式：实心；
边框宽度：2倍；
边缘顶部：50px；
盒影：0px 0px 9px 0px rgba（0,0,0,0.18）；
}

import React，{Component}来自“React”；
导入“/Home.css”；
从“react bootstrap”导入{ControlLabel，FormControl，FormGroup}；
导出默认类Home extends组件{
renderNewObjectsButton（）{
返回(
this.renderNewCard（）}>新建
)
}
render（）{
返回(
{this.props.isAuthenticated？[this.renderNewObjectsButton（）]
：this.renderLander（）}
);
}
renderNewCard（）{
返回(
);
}
}

单击一次按钮调用内部的主对象

你有点像

export var home = new Home()

所以像这样使用这个

<button onClick={()=>home.renderNewCard()}>New</button>

home.renderNewCard（）}>新建

{this.setState（{show:true}}}>{this.state.show&&this.renderNewCard（）}

浏览此链接。它只是根据条件设置要渲染的值。

---

希望它能满足您的需要。

每个react组件都有一个呈现方法，并且只呈现该方法返回的内容。影响渲染方法的方法是通过更改道具或组件的状态

您需要的是存储在组件状态中的变量，如：

import React，{Component}来自“React”；
导入“/Home.css”；
从“react bootstrap”导入{ControlLabel，FormControl，FormGroup}；
导出默认类NewObjectsButton扩展组件{
render（）{
返回(
新的
)
}
}
导出默认类NewCard扩展组件{
render（）{
返回(
);
}
}
导出默认类Home extends组件{
状态={
shouldRenderNewCard:false，
};
renderNewCard（）{
this.setState（{shouldRenderNewCard:true}）；
};
render（）{
返回(
{this.props.isAuthenticated？
：this.renderLander（）}
{this.state.shouldRenderNewCard？：null}
);
}
}

您不能在onClick中渲染，只能设置状态，这将帮助您在内部html中渲染。您不能在onClick中渲染，只能设置状态，这将帮助您在内部html中渲染

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