React实现education-title点击切换显隐及子元素访问方法咨询

一、实现education-title点击切换education-details的显示/隐藏 #

React核心是状态驱动视图，不用像原生JS那样手动绑定事件+操作DOM。直接用状态维护显示状态，点击时切换即可，以下是两种组件写法：

函数组件（推荐） #

import { useState } from 'react';

function EducationSection() {
  // 初始化状态：默认显示详情
  const [isDetailsVisible, setIsDetailsVisible] = useState(true);

  const toggleDetails = () => {
    setIsDetailsVisible(prev => !prev);
  };

  return (
    <div className="education-container">
      {/* 绑定点击事件 */}
      <div className="education-title" onClick={toggleDetails}>
        B.Tech 73%
      </div>
      {/* 根据状态决定是否渲染详情块 */}
      {isDetailsVisible && (
        <div className="education-details">
          Velagapudi RamaKrishna Siddhartha Engineering College
          <br />
          Electronics and Communication Engineering
          <br />
          2019-2023
        </div>
      )}
    </div>
  );
}

类组件写法 #

class EducationSection extends React.Component {
  state = {
    isDetailsVisible: true
  };

  toggleDetails = () => {
    this.setState(prev => ({ isDetailsVisible: !prev.isDetailsVisible }));
  };

  render() {
    return (
      <div className="education-container">
        <div className="education-title" onClick={this.toggleDetails}>
          B.Tech 73%
        </div>
        {this.state.isDetailsVisible && (
          <div className="education-details">
            Velagapudi RamaKrishna Siddhartha Engineering College
            <br />
            Electronics and Communication Engineering
            <br />
            2019-2023
          </div>
        )}
      </div>
    );
  }
}

二、React中访问子元素的方法 #

React不推荐直接操作DOM，但如果业务确实需要，有两种常用实现方式：

1. 操作原生DOM子元素：用useRef/createRef #

给目标子元素添加ref属性，即可直接获取DOM节点：

import { useState, useRef } from 'react';

function EducationSection() {
  const [isDetailsVisible, setIsDetailsVisible] = useState(true);
  const detailsRef = useRef(null); // 创建ref对象

  const toggleDetails = () => {
    setIsDetailsVisible(prev => !prev);
    // 访问子元素DOM节点
    if (detailsRef.current) {
      console.log('详情块内容：', detailsRef.current.textContent);
      // 也可以做DOM操作，比如修改样式
      detailsRef.current.style.color = '#333';
    }
  };

  return (
    <div className="education-container">
      <div className="education-title" onClick={toggleDetails}>
        B.Tech 73%
      </div>
      {isDetailsVisible && (
        <div className="education-details" ref={detailsRef}>
          Velagapudi RamaKrishna Siddhartha Engineering College
          <br />
          Electronics and Communication Engineering
          <br />
          2019-2023
        </div>
      )}
    </div>
  );
}

2. 访问组件子元素：用React.Children工具 #

如果是要处理组件的子组件（而非原生DOM），可以用React提供的React.Children遍历、修改子组件：

function EducationContainer({ children }) {
  // 遍历所有子组件
  React.Children.forEach(children, child => {
    console.log('子组件类型：', child.type);
  });

  // 克隆子组件并追加属性
  const modifiedChildren = React.Children.map(children, child => {
    return React.cloneElement(child, { className: 'custom-child' });
  });

  return <div className="container">{modifiedChildren}</div>;
}

// 使用示例
<EducationContainer>
  <div className="education-title">B.Tech 73%</div>
  <div className="education-details">...</div>
</EducationContainer>

内容的提问来源于stack exchange，提问作者PAVAN SAI PADAVALA