React中如何实现点击按钮切换显示隐藏div（表格与图表视图切换）

你可以通过React内置的状态Hook来实现点击切换显示的需求，完整修改后的代码如下：

// 首先引入useState，如果项目中已引入可跳过这行
import { useState } from 'react';

export function IncomeTables({firminfo, title, arr_number, financials, balance}) {
    // 定义状态控制显示模式：false=默认显示表格，true=显示图表
    const [showChart, setShowChart] = useState(false);

    return <Card>
    {/* 状态为false时显示表格容器 */}
    <div id="div1" style={{display: showChart ? 'none' : 'block'}}>
        <Table>
            <thead>
               <tr>
                 <th colSpan="5">{title} 
                    {/* 给按钮绑定点击事件，切换状态值 */}
                    <button 
                        style={{float:"right"}} 
                        className="btn btn-primary"
                        onClick={() => setShowChart(prev => !prev)}
                    >
                        <FaChartBar/>
                    </button>
                 </th>
                 </tr>
                 ...
               </thead>
           ...
        </Table>
    </div>
    {/* 状态为true时显示图表容器 */}
    <div id="div2" style={{display: showChart ? 'block' : 'none'}}>
        <BarChart>
            ...
        </BarChart>
    </div>

    </Card>
}

可选优化方案 #

如果你希望隐藏的元素不需要保留在DOM中，降低性能消耗，可以改用条件渲染的写法，把两个div的部分替换为如下代码即可：

{!showChart ? (
    <div id="div1">
        {/* 原有表格完整内容 */}
    </div>
) : (
    <div id="div2">
        {/* 原有图表完整内容 */}
    </div>
)}

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