Question

我正在尝试显示基于拨动开关的元素。如果切换为假，然后单击按钮，它将呈现一个元素。如果该切换为true，则将渲染另一个。我知道我已经接近了，但是我无法掌握最后的部分。这是我到目前为止的内容：

const HonestSlogan = (
  <div>
    <p>"Air Force: Come in, have a seat."</p>
    <p>"Navy: 5,000 dudes surrounded by water."</p>
    <p>"Army: A sh*tty job for anyone and everyone."</p>
    <p>"Marine Corps: Marines for-f*ucking-ever."</p>
  </div>
);
const Slogan = (
  <div>
    <p>"Air Force: Aim High, Fly-Fight-Win"</p>
    <p>"Navy: Forged by the Sea"</p>
    <p>"Army: Army Strong"</p>
    <p>"Marine Corps: The Few, The Proud"</p>
  </div>
);
function App() {
  const [value, setValue] = useState(false);
  const handleBtn = () => {
    Toggle.isOn = value ? (
      <div id="para">{HonestSlogan}</div>
    ) : (
      <div id="para">{Slogan}</div>
    );
  };
  return (
    <div className="App">
      <h1>Military Slogans</h1>
      <Toggle
        isOn={value ? console.log(HonestSlogan) : console.log(Slogan)}
        handleToggle={() => setValue(!value)}
      />
      <div>
        <button onClick={handleBtn}>Check Slogan</button>
      </div>
    </div>
  );
}

export default App;

这是Toggle组件：

const Toggle = ({ isOn, handleToggle }) => {
  return (
    <div className="toggle-title">
      <div>Official Slogan</div>
      <label className="switch">
        <input type="checkbox" checked={isOn} onChange={handleToggle} />
        <span className="slider round"></span>
      </label>
      <div>Honest Slogan</div>
    </div>
  );
};
export default Toggle;

这是我在codesandbox上完成的代码：https://codesandbox.io/s/militaryslogans-2z9w8 谢谢你的帮助。

Answer 1

添加一个showSlogan状态，该状态通过单击更新切换值时重置的按钮来触发。使用showSlogan值和value的三元数来渲染一个标语div或另一个。注意：您的沙箱缺少Toggle组件中的内容，因此我添加了您在此处发布的内容。

import React, { useState } from "react";
import "./App.css";
import Toggle from "./Toggle";

const HonestSlogan = (
  <div>
    <p>"Air Force: Come in, have a seat."</p>
    <p>"Navy: 5,000 dudes surrounded by water."</p>
    <p>"Army: A sh*tty job for anyone and everyone."</p>
    <p>"Marine Corps: Marines for-f*ucking-ever."</p>
  </div>
);

const Slogan = (
  <div>
    <p>"Air Force: Aim High, Fly-Fight-Win"</p>
    <p>"Navy: Forged by the Sea"</p>
    <p>"Army: Army Strong"</p>
    <p>"Marine Corps: The Few, The Proud"</p>
  </div>
);
function App() {
  const [value, setValue] = useState(false);
  const [showSlogan, setSetSlogan] = useState(false); // add a toggle for showing slogan
  const handleBtn = () => {
    setSetSlogan(true); // set show slogan true when clicked
  };
  return (
    <div className="App">
      <h1>Military Slogans</h1>
      <Toggle
        isOn={value ? console.log(HonestSlogan) : console.log(Slogan)}
        handleToggle={() => {
          setValue(!value);
          setSetSlogan(false); // disable show slogan when toggle changes
        }}
      />
      <div>
        <button onClick={handleBtn}>Check Slogan</button>
        { showSlogan && (value ? Slogan : HonestSlogan)} // selectively render slogan if show is true and then pick which slogan div to display
      </div>
    </div>
  );
}

export default App;

根据切换和onclick条件渲染元素

1 个答案: