迭代 <a> 和 Typescript 优化

Question

一段代码 - 我意识到：

• 可以通过循环优化 div 中的内容
• 打字稿不一定正确

有人可以在重构方面提供高级帮助吗？

---

type Status =
  | "no-status"
  | "active"
  | "hold"
  | "close"

  interface IState {
    status: Status;
  }

const Main: React.FC = ()=>{
    const [status, setStatus] = useState<IState>("no-status");
    return(
        <div>                
           <a href='#'  onClick={()=>setStatus("active")} >Active </a> 
           <a href='#' onClick={()=>setStatus("hold")} >Idle </a>
           <a href='#' onClick={()=>setStatus("close")}>Close </a>           
      </div>     
    );
};

Answer 1

您将您的状态定义为与 KEY 状态的接口...

type Status =
  | "no-status"
  | "active"
  | "hold"
  | "close"

  interface IState {
    status: Status;
  }

const Main: React.FC = ()=>{
    const [status, setStatus] = useState<IState>({status: 'no-status'});
    return(
        <div>                
           <a href='#'  onClick={()=>setStatus({status: 'active'})} >Active </a> 
           <a href='#' onClick={()=>setStatus({status: 'hold'})} >Idle </a>
           <a href='#' onClick={()=>setStatus({status: 'close'})}>Close </a>           
      </div>     
    );
};

编辑：

const iterateStatus: Status[] = ['active', 'hold', 'close'];
const Main: React.FC = ()=>{
    const [status, setStatus] = useState<IState>({status: 'no-status'});
    return (
      <div>
        {iterateStatus.map((status) => (
          <a href="#" onClick={() => setStatus({ status: status })}>{status}</a>
        ))}
      </div>
    );
};