基于切换和点击有条件地渲染元素答案

【问题标题】：Conditionally render element based on toggle and onclick基于切换和点击有条件地渲染元素
【发布时间】：2020-04-29 14:58:21
【问题描述】：

我正在尝试显示基于切换开关的元素。如果切换为 false 并且您单击按钮，它将呈现一个元素。如果切换为真，它将呈现另一个。我知道我很接近，但我无法得到最后一部分。这是我目前所拥有的：

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;

这里是切换组件：

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;

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

【问题讨论】：

标签： javascript html css reactjs react-hooks

【解决方案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;

【讨论】：