javascript 保持你的“按钮”实例并改变它的道具而不是在道具改变时创建新按钮，这样你就可以保持键盘导航了

Posted 2021-05-03

import React from 'react';

// Don't do this
const Button = ({ isChecked }) => (
  <div>
    {isChecked && <button className="btn btn--checked">I'm checked</button>}
    {!isChecked && <button className="btn btn--unchecked">I'm not checked</button>}
  </div>
);
    
// Do this instead
const Button = ({ isChecked }) => (
  <div>
    <button className={`btn ${isChecked ? "btn--checked" : "btn--unchecked"}`}>
      {isChecked ? "I'm checked" : "I'm not checked"}
    </button>
  </div>
);