单击按钮时有条件渲染 3 个组件中的 1 个（反应）

Question

我是反应新手，一直在努力弄清楚如何根据单击的按钮来渲染容器内的组件。

我已将状态设置为 false，然后在按钮上单击将其设置为 true，然后使用三元运算符显示或将组件设置为 null，但在单击下一个按钮时不起作用，因为状态已设置为是的。

任何正确方向的帮助将不胜感激:)

const AboutUs = () => {

  const [VisDetails, setVisDetails] = useState(false);

  return (

<Button>Personal Details</Button>
<Button>Bio</Button>
<Button>Qualifications</Button>

Container className={classes.container}>

<PersonalDetails />
<ProfileBio />
<ProfileQualifications />

</Container>

  );
};

Answer 1

我认为在这种情况下最好的做法是根据应显示的内容保存状态，然后在单击按钮时更新该状态。

类似这样的事情

const AboutUs = () => {
  const [selected, setSelected] = useState(null); //Here goes the default value you want to show, or null if you want no render

  return (
    <>
      <Button
        onClick={() => {
          setSelected("personaldetails");
        }}
      >
        Personal Details
      </Button>
      <Button
        onClick={() => {
          setSelected("bio");
        }}
      >
        Bio
      </Button>
      <Button
        onClick={() => {
          setSelected("qualif");
        }}
      >
        Qualifications
      </Button>

      <Container className={classes.container}>
        {selected == "personaldetails" ? <PersonalDetails /> : null}
        {selected == "bio" ? <ProfileBio /> : null}
        {selected == "qualif" ? <ProfileQualifications /> : null}
      </Container>
    </>
  );
};

你可以使用 switch() 但我喜欢内联 if 语句，更容易阅读。

Answer 2

根据按钮单击

selected

状态接收将在

showSelectedOption()

中使用的值以返回正确的组件。

const AboutUs = () => {
  const [selected, setSelected] = useState('');

const showSelectedOption = () => {
  switch(selected) {
    case 'details':
      return  <PersonalDetails />;
    case 'bio':
      return  <ProfileBio />;
    case 'qualif':
      return  <ProfileQualifications />;
    default:
      return '';

  }
}

return (
   <Button onClick={() => setSelected('details')}>Personal Details</Button>
   <Button onClick={() => setSelected('bio')}>Bio</Button>
   <Button onClick={() => setSelected('qualif')}>Qualifications</Button>

   Container className={classes.container}>
      {showSelectedOption()} 
   </Container>
  );
};