ReactJS中实现精确点击显示：避免列表项全局展开的教程

// App.js 核心片段
function App() {
  const [toggled, setToggled] = useState(true); // 这个状态是全局的

  return (
    <div>
      {/* ...其他组件 */}
      <div>
      { activeCategory == 0 ? jobs.map((job) => <JobBoardComponent toggled={toggled} setToggled={setToggled} job={job} key={job.id} />)
       : filtered.map((job) => <JobBoardComponent toggled={toggled} setToggled={setToggled}
      job={job} key={job.id} />)}  
      </div>
    </div>
  );
}

// JobBoardComponent.js 核心片段
function JobBoardComponent({ toggled, setToggled, job }) {
    const handleClick = event => {
      setToggled(!toggled); // 修改的是App.js中的toggled状态
    };

    return  ( 
      <div id="jobboard"  onClick={handleClick} className={`...`}>
        {/* ...职位摘要信息 */}
        <div id="jobdesc" className={toggled ? "hidden font-mono my-10 " : "font-mono my-10"} >
          {/* ...详细信息，其可见性由toggled控制 */}
        </div>
        {/* ...其他信息 */}
      </div> 
    )
}

// App.js
import './App.css';
import React, {useState, useEffect} from 'react'
import jobData from "./assets/data.json"
import JobBoardComponent from './components/JobBoardComponent';
// ... 其他导入

function App() {
  const [jobs, setJobs] = useState([])
  // ... 其他状态
  // 新增状态：存储当前被选中职位ID
  const [selectedJobId, setSelectedJobId] = useState(null); // 初始化为null，表示没有职位被选中

  useEffect(() => {
    setJobs(jobData)
  }, [])

  // ... 其他逻辑

  return (
    <div className="App w-auto">
      {/* ... NavBar, BannerPage, EmailBar, Filters */}
      <div>
      { (activeCategory === 0 ? jobs : filtered).map((job) => (
        <JobBoardComponent 
          job={job} 
          key={job.id} 
          // 传递一个回调函数，用于更新父组件的selectedJobId状态
          onJobSelect={setSelectedJobId}
          // 传递一个布尔值，指示当前job是否是选中项
          isSelected={selectedJobId === job.id}
        />
      ))}  
      </div>
    </div>
  );
}

export default App;

// JobBoardComponent.js
import React from "react" // 移除了useState和useEffect，因为toggled状态不再由子组件自身管理

function JobBoardComponent({ onJobSelect, isSelected, job }) { // 接收新的props

   const langAndTools = []
   const skill = job.skills
   const tools = job.tools
   if (skill && tools) {
      langAndTools.push(...skill)
      langAndTools.push(...tools)
   } 

    // 移除了useEffect和本地的toggled状态

    const handleClick = () => {
      // 当点击时，调用父组件传递下来的onJobSelect函数，并传入当前job的ID
      // 如果当前job已经是选中状态，再次点击则关闭详情（将selectedJobId设为null）
      // 否则，设置为当前job的ID
      onJobSelect(isSelected ? null : job.id);
    };

return  ( 
   // 注意：onClick现在直接调用handleClick，并且不需要传递event
   <div id="jobboard"  onClick={handleClick} className={`flex flex-col hover:bg-gray-100  bg-white shadow-md m-4 mb-20 px-6  -mt-10 rounded ${job.featured && 'border-l-4 border-black'}`}>
      <div>
         <img className="-mt-10 mb-4 w-20 h-20"src={job.logo} alt={job.company}></img>
      </div> 
      <div className="text-left  mt-1">
         <h3 className="font-mono font-bold text-blue-600">
         {job.company}
         {job.fresh && (<span className="text-blue-100 bg-blue-500 font-bold m-2 py-1 px-2 rounded-full">
         New</span>)}
         {job.featured && (<span className="text-white bg-gray-800 font-bold m-2 py-1 px-2 rounded-full">Featured</span>)}
         </h3>
         <h2 className="font-mono font-bold text-xl my-2">{job.position}</h2>
         <p className="font-mono text-gray-700">
            {job.postedAt} · {job.contract} · {job.location}
         </p>
      </div> 
      {/* 根据isSelected prop来条件渲染详细信息 */}
      {isSelected && (
        <div id="jobdesc" className="font-mono my-10" >
            <h3>Who We Are:</h3>
            <p>{job.whoweare}</p>
            <br></br>
            <h3>Job Description:</h3>
            <p>{job.description}</p>
            <br></br>
            <br></br>
            <a  id="applybtn" target="_blank" href={job.joblink} className="font-mono text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg text-sm px-32 py-2 text-center mr-2 content-center"> Apply </a>
            <br></br>
        </div>
      )}
      <div className="flex flex-wrap items-center mt-4 mr-4 pt-4 border-t-2 border-gray-300 border-solid">
      {langAndTools ? (
         langAndTools.map((langAndTool) => (
         <span className="text-blue-600 bg-blue-100 font-bold mr-4 mb-4 p-2 rounded">{langAndTool}</span>
         ))
      )
      : " "
      }   
      </div>
   </div> 
   )
}

 export default JobBoardComponent