Question

我想问问是否有更好的方法来编写此React代码。本质上有2个按钮，一个总是“活动”的。问题是这个

namespace Facebook\WebDriver;
use C:\xampp\htdocs\WebdriverFacebook\lib\Remote\DesiredCapabilities;
use C:\xampp\htdocs\WebdriverFacebook\lib\Remote\RemoteWebDriver;
require_once('C:\xampp\htdocs\newapp\vendor\autoload.php');

理想情况下，我可以这样做：className = {menuMessages =='messages'吗？ 'active'：''}

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

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

您可以这样操作：

 private fun startCamera() {
        val metrics = DisplayMetrics().also { view_finder.display.getRealMetrics(it) }
        val screenAspectRatio = Rational(metrics.widthPixels, metrics.heightPixels)
        val previewConfig = PreviewConfig.Builder().apply {
            setTargetAspectRatio(screenAspectRatio)
            setTargetRotation(view_finder.display.rotation)
        }.build()
        // Build the viewfinder use case
        preview = Preview(previewConfig)
        preview.setOnPreviewOutputUpdateListener {
            // To update the SurfaceTexture, we have to remove it and re-add it
            val parent = view_finder.parent as ViewGroup
            parent.removeView(view_finder)
            parent.addView(view_finder, 0)
            view_finder.surfaceTexture = it.surfaceTexture
            updateTransform()
        }
        CameraX.bindToLifecycle(this, preview)
    }

Answer 3

最好使用像'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;

Answer 4

您可以在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>
);

React-条件JSX渲染

4 个答案: