我对 React 和一般编码都很陌生。我试图在同一组件中渲染多个模态,但它们都是同时渲染的,因此看起来所有链接都在最后一个模态中渲染文本。
这是状态设置的地方:
class Header extends React.Component {
constructor () {
super();
this.state = {open:false}
this.openModal = this.openModal.bind(this);
this.closeModal = this.closeModal.bind(this);
this.handleModalChangeEnter = this.handleModalChange.bind(this, true);
this.handleModalChangeLogin = this.handleModalChange.bind(this, false);
}
openModal () {
this.setState({open: true}); }
closeModal () {
this.setState({open: false}); }
render() {
Run Code Online (Sandbox Code Playgroud)
这是模态结构:
return (
<header style={home}>
<div style={hello}>
<img style={logo} src='public/ycHEAD.png'/>
<p style={slogan}>One Calendar for All of Yerevan's Tech Events</p>
</div>
<div style={subContainer}>
<ul style={modalDirectory}>
<Button onClick={this.openModal}
style={openButton}>
<li><a style={tabs}>Enter
</a></li>
</button>
<Modal style={modalCont}
isOpen={this.state.open}>
<button …Run Code Online (Sandbox Code Playgroud)