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

Question

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

我已将状态设置为 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 语句，更易于阅读。

Answer 2

基于按钮点击selected状态接收到的值将在showSelectedOption()到return右边的组件中使用。

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>
  );
};

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

Conditional render 1 of 3 components on button click (react)

javascript

web-frontend

reactjs