React切换CSS类控制iframe与div显隐时div样式不生效问题

样式不生效的问题来自两个高频易错点：

• CSS选择器匹配规则问题：你写显隐样式时大概率把类选择器和元素标签做了绑定，例如写了类似iframe.content_frame { display: block; }、iframe.content_site { display: none; }的规则。这类带标签前缀的选择器只会匹配iframe元素，同样的类名挂载到div元素上时，选择器规则不匹配，样式自然不会生效。
• JSX语法错误：表单内的提交按钮使用了原生HTML的class属性声明类名，React JSX语法要求所有元素的类名必须使用className属性，这个语法错误会导致当前div块的渲染出现异常，干扰样式正常应用。
• 附加细节问题：iframe标签上的frameborder属性在JSX中需要写成驼峰格式frameBorder，否则会持续抛出React渲染警告。

1. 先调整CSS显隐样式，去掉类选择器前的标签前缀，保证类名挂载到任意元素上都能命中规则，参考样式：

/* 内容显示状态类 */
.content_frame {
  display: block;
  width: 100%;
  /* 其余你需要的展示样式，比如尺寸、定位等 */
}
/* 内容隐藏状态类 */
.content_site {
  display: none;
}

2. 修正JSX中的语法错误，把按钮的class属性改为className，iframe的frameborder改为frameBorder，修正后的完整组件代码如下：

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)} />
            <div className='txt'>
                <h2 onClick={() => setContent(!content)}>{title}</h2>
            </div>
            <iframe className={`${content ? 'content_site' : 'content_frame'}`} src={site} frameBorder="0" title={title} />
            <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" className="btn btn-outline-warning button_submit"> Enviar</button>
                </form>
            </div>
        </div >
    )
}
export default Card;

优化建议：互斥显隐逻辑不需要靠两个类来回切换，更简洁的写法是单独抽离隐藏类，直接用state控制类名挂载，比如iframe写className={content ? 'hide' : 'content_frame'}，div写className={content ? 'content_frame' : 'hide'}，能大幅降低类名写反的概率。

内容的提问来源于stack exchange，提问作者Victor Torres