Как отображать один из нескольких компонентов, по выбору пользователя?

Question

[Abykeev]

const Calendar = () => {
  const [visibleDay, setVisibleDay] = useState(false);
  const [visibleWeek, setVisibleWeek] = useState(false);
  const [visibleMonth, setVisibleMonth] = useState(false);
  const [visibleYear, setVisibleYear] = useState(false);

  const handleDay = () => {
    setVisibleDay(!visibleDay);
  };
  const handleWeek = () => {
    setVisibleWeek(!visibleWeek);
  };
  const handleMonth = () => {
    setVisibleMonth(!visibleMonth);
  };
  const handleYear = () => {
    setVisibleYear(!visibleYear);
  };

  return (
    <button onClick={handleDay}>Day</button>
    <button onClick={handleWeek}>Week</button>
    <button onClick={handleMonth}>Month</button>
    <button onClick={handleYear}>Year</button>

    {visibleDay && <div> <Components1/> </div>}
    {visibleWeek && <div> <Components2/> </div>}
    {visibleMonth && <div> <Components3/> </div>}
    {visibleYear && <div> <Components4/> </div>}
  );
};

Comments

[Дмитрий Кузнецов]

Код оформите по правилам

[Abykeev]

Дмитрий Кузнецов, можно ссылку на эти правила? Не нашел

[Модератор]

Abykeev, ссылка в подвале на каждой странице, как на любом другом сайте мира. А ещё она была на странице регистрации.

Answer 1

[Алексей Уколов]

const [mode, setMode] = useState(null);

const handleDay = () => {
  setMode(mode === `day` ? null : `day`);
};
const handleWeek = () => {
  setMode(mode === `week` ? null : `week`);
};
const handleMonth = () => {
  setMode(mode === `month` ? null : `month`);
};
const handleYear = () => {
  setMode(mode === `year` ? null : `year`);
};

<кнопка onClick={handleDay}>Day</кнопка >
<кнопка onClick={handleWeek}>Week</кнопка >
<кнопка onClick={handleMonth}>Month</кнопка >
<кнопка onClick={handleYear}>Year</кнопка >

{mode === `day` && <div> <Components1/> </div>}
{mode === `week` && <div> <Components2/> </div>}
{mode === `month` && <div> <Components3/> </div>}
{mode === `year` && <div> <Components4/> </div>}

Ну или если вам уж очень хочется быть многословным, то так:

const handleDay = () => {
  setVisibleDay(!visibleDay);
  setVisibleWeek(false);
  setVisibleMonth(false);
  setVisibleYear(false);
};

Answer 2

[0xD34F]

const components = [
  [   'Day', Components1 ],
  [  'Week', Components2 ],
  [ 'Month', Components3 ],
  [  'Year', Components4 ],
];

const [ active, setActive ] = useState(-1);
const Component = components[active]?.[1];
const onClick = e => setActive(+e.target.dataset.index);

{components.map((n, i) => <button data-index={i} onClick={onClick}>{n[0]}</button>)}
{Component && <Component />}

Comments

[Алексей Уколов]

Я вот тоже подумал про карту компонентов, но разве в этом случае они не будут всегда исполняться? Понятно, что в итоговый рендер они не пойдут, но сами-то будут отрендерены, разве нет?

[0xD34F]

Алексей Уколов, нет. Там же не [ '...', <ComponentName /> ] лежат. А если бы лежали, то вместо {Component && <Component />} было бы просто {Component}.

[Алексей Уколов]

А, это же ссылка на функцию просто, я затупил.