javascript - 单击按钮时有条件渲染 3 个组件中的 1 个( react )

Question

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

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

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

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(//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 语句，更易于阅读。