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

【问题标题】：Conditional render 1 of 3 components on button click (react)单击按钮时有条件渲染 3 个组件中的 1 个（反应）
【发布时间】：2021-08-11 03:07:31
【问题描述】：

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

我已将状态设置为 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>

  );
};

【问题讨论】：

标签： javascript reactjs web-frontend

【解决方案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 语句，更易于阅读。

【讨论】：

onClick 需要一个函数
哦，你是对的，所以你必须为每个onClick定义一个处理程序，有时React有点乱。我会改变答案。
谢谢你，这很好。使用这两种方法有什么优点或缺点吗？
switch 和 inline 评估之间没有明显的优势，我喜欢 inline 因为更容易阅读。我将修改答案，有一种没有处理程序的更清洁的方法。如果它正确回答了您的问题，请勾选答案:)

【解决方案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>
  );
};

【讨论】：