如何将React周期表组件onClick的元素数据展示到卡片中？

在React里绝对不要用document.write()，这会直接绕过React的虚拟DOM渲染机制，导致页面混乱或者无效果。正确的做法是用React的状态来管理选中的元素，再根据状态渲染卡片内容。

具体实现步骤：

1. 引入React的useState钩子，用来存储选中的元素数据
2. 在组件内部定义状态变量，记录当前选中的元素
3. 修改元素按钮的点击事件，把选中的元素数据存入状态
4. 在组件的JSX中添加卡片的渲染逻辑，根据状态判断是否展示卡片

完整代码示例：

import { useState } from 'react';

const PeriodicTable = () => {
  // 定义状态存储选中的元素，初始值为null表示未选中任何元素
  const [selectedElement, setSelectedElement] = useState(null);

  return (
    <div className="periodic-table">
      {/* 周期表元素按钮列表 */}
      {data.elements.map((element) => (
        <button
          className="element"
          key={element.name}
          onClick={() => setSelectedElement(element)} // 点击时更新选中状态
          style={{
            gridRow: element.ypos,
            gridColumn: element.xpos,
            borderColor: colorMap[element.category],
          }}
        >
          {/* 按钮内可展示元素符号或名称 */}
          {element.symbol}
        </button>
      ))}

      {/* 元素信息卡片，选中元素后才渲染 */}
      {selectedElement && (
        <div className="element-card">
          <h2>{selectedElement.name} ({selectedElement.symbol})</h2>
          <p>原子序数: {selectedElement.number}</p>
          <p>原子量: {selectedElement.atomic_mass}</p>
          <p>分类: {selectedElement.category}</p>
          {/* 可根据你的JSON数据结构补充更多字段 */}
          <button onClick={() => setSelectedElement(null)}>关闭卡片</button>
        </div>
      )}
    </div>
  );
};

export default PeriodicTable;

核心说明 #

• React是状态驱动视图的框架，所有UI变化都应该通过修改状态触发，而非直接操作DOM
• selectedElement为空时卡片不渲染；选中元素后状态更新，React会自动重新渲染卡片区域
• 可以给.element-card添加CSS样式（比如固定定位、背景色、圆角边框等），让它更符合卡片的视觉效果

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