Реагировать - Условный рендеринг JSX

Question

Я хотел спросить, есть ли лучший способ написать этот React Code.По сути, есть 2 кнопки, и одна всегда «активна».Проблема заключается в следующем:

    // Menu Config
let menuMessages = false
let menuSentMessages = false
if (menu === 'messages') {
    menuMessages = true
} else {
    menuSentMessages = true
}

В идеале я мог бы сделать: className = {menuMessages == 'messages'?'active': ''}

const Account = () => {
const [menu, setMenu] = useState('messages')

// Menu Config
let menuMessages = false
let menuSentMessages = false
if (menu === 'messages') {
    menuMessages = true
} else {
    menuSentMessages = true
}

return (
        <main className="messages">
            <div className="wrapper">

                <section className="controls">
                    <button
                        onClick={() => setMenu('messages')}
                        className={menuMessages ? 'active' : ''}
                    >
                        Messages
                    </button>
                    <button
                        onClick={() => setMenu('sent')}
                        className={menuSentMessages ? 'active' : ''}
                    >
                        Sent Messages
                    </button>
                </section>

            </div>
        </main>
)}export default Account

Answer 1

Я не понимаю, для чего "меню", но вот мое решение

const Account = () => {
  const [menu, setMenu] = useState("messages");
  const [menuMessages, setMenuMessages] = useState(false);
  const [menuSentMessages, setMenuSentMessages] = useState(false);

  const onClick = type => {
    setMenu(type);
    if (type === "messages") {
      setMenuMessages(true);
    } else {
      setMenuSentMessages(true);
    }
  };

  return (
    <main className="messages">
      <div className="wrapper">
        <section className="controls">
          <button
            onClick={() => onClick("messages")}
            className={menuMessages ? "active" : ""}
          >
            Messages
          </button>
          <button
            onClick={() => onClick("sent")}
            className={menuSentMessages ? "active" : ""}
          >
            Sent Messages
          </button>
        </section>
      </div>
    </main>
  );
};

Answer 2

Вы можете сделать это следующим образом:

const Account = () => {
  const [menu, setMenu] = useState('messages')

  return (
    <main className="messages">
      <div className="wrapper">
        <section className="controls">
          <button onClick={() => setMenu('messages')}
                  className={menu === 'messages' ? 'active' : ''}>
            Messages
          </button>
          <button onClick={() => setMenu('sent')}
                  className={menu === 'sent' ? 'active' : ''}>
            Sent Messages
          </button>
        </section>
      </div>
    </main>
  )}export default Account

Answer 3

Вы можете переместить чеки внутри JSX.

return (
        <main className="messages">
            <div className="wrapper">

                <section className="controls">
                    <button
                        onClick={() => setMenu('messages')}
                        className={menu === 'messages' ? 'active' : ''}
                    >
                        Messages
                    </button>
                    <button
                        onClick={() => setMenu('sent')}
                        className={menu === 'sent' ? 'active' : ''}
                    >
                        Sent Messages
                    </button>
                </section>

            </div>
        </main>
);

Answer 4

Может быть лучше использовать состояние типа Boolean, например 'isSent'.

const Account = () => {
  const [isSent, setIsSent] = useState(false)

  return (
        <main className="messages">
            <div className="wrapper">
                <section className="controls">
                      <button
                         onClick={() => setIsSent(false)}
                         className={isSent ? 'active' : ''}
                       >
                          Messages
                      </button>
                      <button
                         onClick={() => setIsSent(true)}
                         className={isSent ? '' : 'active'}
                       >
                          Sent Messages
                      </button>
                  }
                </section>
            </div>
        </main>
  )
}

export default Account;