使用react操纵css的问题

Question

希望你们中有人能帮我解决这个问题…

在下面的代码中，我有两个独立的元素，我想一次显示一个。

第一个元素是iframe第二个是Div

的想法是，如果用户点击{title}，然后框架消失，div出现。

我可以通过点击标题来使框架消失并出现，但是div不会发生同样的情况。

的代码是基本相同的，所以我真的不明白为什么div没有相同的行为，然后框架。

我也仔细检查了一下，两个css类都按预期改变了，只是css类似乎不能在Div上工作。

提前谢谢。

import React, { useState } from 'react';
const Card = (props) => {
const { id, title, active, site, img } = props.data;
const [content, setContent] = useState(false);
return (
<div className={`card ${active && 'active'}`} >
<img id='img_cover' src={img} alt='image01' onClick={() => props.onCardClick(id)}></img>
<div className='txt'>
<h2 onClick={() => setContent(!content)}>{title}</h2>
</div>
<iframe className={`${content ? 'content_site' : 'content_frame'}`} src={site} frameborder="0" title={title}>
</iframe>
<div className={`${content ? 'content_frame' : 'content_site'}`}>
<form id="contact-form" action="#" className="table">
<input className='input_espace row' id='nome' placeholder="Name" name="name" type="text" required />
<input className='input_espace row' id='email' placeholder="Email" name="email" type="email" required />
<textarea id="text_area" className='row' cols="50" placeholder="Message" type="text" name="message" />
<button type="button" class="btn btn-outline-warning button_submit"> Enviar</button>
</form>
</div>
</div >
)
}
export default Card;

Answer 1

className={`${content ? 'content_site' : 'content_frame'}`} 

和

className={`${content ? 'content_frame' : 'content_site'}`}

是相互矛盾的因为两者都期望content为真将其中一个改为!content

在setContent(!content)}

方法中可以看到改变第二个:

import React, { useState } from 'react';
const Card = (props) => {
const { id, title, active, site, img } = props.data;
const [content, setContent] = useState(false);
return (
<div className={`card ${active && 'active'}`} >
<img id='img_cover' src={img} alt='image01' onClick={() => props.onCardClick(id)}></img>
<div className='txt'>
<h2 onClick={() => setContent(!content)}>{title}</h2>
</div>
<iframe className={`${content ? 'content_site' : 'content_frame'}`} src={site} frameborder="0" title={title}>
</iframe>
<div className={`${!content ? 'content_frame' : 'content_site'}`}>
<form id="contact-form" action="#" className="table">
<input className='input_espace row' id='nome' placeholder="Name" name="name" type="text" required />
<input className='input_espace row' id='email' placeholder="Email" name="email" type="email" required />
<textarea id="text_area" className='row' cols="50" placeholder="Message" type="text" name="message" />
<button type="button" class="btn btn-outline-warning button_submit"> Enviar</button>
</form>
</div>
</div >
)
}
export default Card;