ReactJS教程：如何实现点击单个职位显示详情

function App() {
  // ...
  const [toggled, setToggled] = useState(true); // 全局切换状态
  // ...

  return (
    <div className="App w-auto">
      {/* ...其他组件 */}
      <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>
  );
}

function JobBoardComponent({ toggled, setToggled, job }) {
  // ...
  const handleClick = event => {
    setToggled(!toggled); // 更新全局状态
  };

  return  ( 
    <div id="jobboard"  onClick={handleClick} className={`...`}>
      {/* ...职位摘要信息 */}
      <div id="jobdesc" className={toggled ? "hidden font-mono my-10 " : "font-mono my-10"} >
        {/* ...职位详细描述 */}
      </div>
      {/* ... */}
    </div> 
  )
}

// App.js
import React, {useState, useEffect} from 'react';
// ...其他导入

function App() {
  const [jobs, setJobs] = useState([]);
  // ...其他状态

  // 新增状态：用于存储当前被点击的职位ID
  const [selectedJobId, setSelectedJobId] = useState(null); 

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

  // 处理职位点击事件的函数，更新selectedJobId
  const handleJobClick = (id) => {
    // 如果点击的是同一个职位，则再次点击时隐藏详情 (切换功能)
    setSelectedJobId(prevId => (prevId === id ? null : id));
  };

  return (
    <div className="App w-auto">
      {/* ...其他组件 */}
      <div>
      { activeCategory == 0 ? 
        jobs.map((job) => (
          <JobBoardComponent 
            job={job} 
            key={job.id} 
            // 传递点击处理函数
            onJobClick={handleJobClick} 
            // 判断当前职位是否是选中状态，并作为prop传递
            isSelected={selectedJobId === job.id} 
          />
        ))
       : 
        filtered.map((job) => (
          <JobBoardComponent 
            job={job} 
            key={job.id} 
            onJobClick={handleJobClick} 
            isSelected={selectedJobId === job.id} 
          />
        ))}  
      </div>
    </div>
  );
}

export default App;

// JobBoardComponent.js
import React from "react"; // 不再需要useState和useEffect来管理toggled

function JobBoardComponent({ onJobClick, 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 = () => {
      // 调用父组件传递的onJobClick函数，并传入当前job的id
      onJobClick(job.id); 
   };

return  ( 
   // onClick事件现在调用本地的handleClick，它会再调用父组件的onJobClick
   <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来条件渲染详情区域 */}
      <div id="jobdesc" className={isSelected ? "font-mono my-10 " : "hidden 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, index) => ( // 添加index作为key，如果langAndTool本身没有唯一id
         <span key={index} className="text-blue-600 bg-blue-100 font-bold mr-4 mb-4 p-2 rounded">{langAndTool}</span>
         ))
      )
      : " "
      }   
      </div>
   </div> 
   )
}

 export default JobBoardComponent;