javascript - React js 将 css 转换为 css 以进行反应

Question

我在 reactjs 中有以下项目，带有以下外部 css 代码，我想将 css 代码转换为 css 样式以在函数内部使用。

这是我设法转换的第一部分，但我无法弄清楚如何转换其余部分以及如何在 Toggle 方法中使用它们。

链接：codesandbox

Ps 我不明白为什么当切换为假时你看不到。

const styles = {
        toggle: {
            height: "100px",
            width: "200px",
            borderRadius: "50px",
            margin: "auto",
            backgroundImage: "linear-gradient(aqua, skyblue)",
            position: "relative",
            cursor: "pointer",
        },
        notch: {
            height: "90px",
            width: "90px",
            borderRadius: "50%",
            background: "yellow",
            position: "absolute",
            top: "5px",
            left: "5px",
            boxShadow: "0 0 5px yellow",
            zIndex: 1,
            transition: "all 0.3s ease",
        }
    };

const {useState} = React;

const Toggle = ({ toggled, onClick }) => {
    return (
        <div onClick={onClick} className={`toggle${toggled && " night"}`}>
            <div className="notch">
                <div className="crater" />
                <div className="crater" />
            </div>
            <div>
                <div className="shape sm" />
                <div className="shape sm" />
                <div className="shape md" />
                <div className="shape lg" />
            </div>
        </div>
    );
}

const App = () => {
  const [toggled, setToggled] = useState(true);
    const handleClick = () => setToggled((s) => !s);
    return (
        <div className="App">
            <Toggle toggled={toggled} onClick={handleClick} />
        </div>
    );
};

ReactDOM.render(
  <App />,
  document.getElementById("react")
);

.toggle {
    height: 100px;
    width: 200px;
    border-radius: 50px;
    margin: auto;
    background-image: linear-gradient(aqua, skyblue);
    position: relative;
    cursor: pointer;
}

.toggle.night {
    background-image: linear-gradient(midnightblue, rebeccapurple);
}

.notch {
    height: 90px;
    width: 90px;
    border-radius: 50%;
    background: yellow;
    position: absolute;
    top: 5px;
    left: 5px;
    box-shadow: 0 0 5px yellow;
    z-index: 1;
    transition: all 0.3s ease;
}

.notch > .crater {
    background: burlywood;
    border-radius: 50%;
    position: absolute;
    opacity: 0;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.4) inset;
}
.night .crater {
    opacity: 0.4;
}

.crater:first-child {
    left: 5px;
    top: 15px;
    height: 15px;
    width: 40px;
    transform: rotate(-45deg);
}

.crater:last-child {
    right: 10px;
    top: 15px;
    height: 15px;
    width: 25px;
    transform: rotate(45deg);
}

.night > .notch {
    background: whitesmoke;
    box-shadow: 0 0 5px whitesmoke;
    transform: translate(100px, 0);
}

.shape {
    position: absolute;
    background: whitesmoke;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.shape.sm {
    height: 5px;
    width: 50px;
    top: 50%;
    left: 60%;
}

.shape.md {
    height: 10px;
    width: 75px;
    top: 25%;
    left: 25%;
    z-index: 2;
}

.shape.lg {
    height: 15px;
    width: 100px;
    bottom: 20px;
    left: 25%;
}

.night .shape {
    background: lightgray;
    box-shadow: 0 0 10px 2px violet;
}

.night .shape.sm {
    height: 5px;
    width: 5px;
    transform: translate(-40px, 0);
}

.night .shape.sm:first-of-type {
    transform: translate(-80px, -10px);
}

.night .shape.md {
    height: 10px;
    width: 10px;
    transform: translate(10px, 0);
}

.night .shape.lg {
    height: 15px;
    width: 15px;
    transform: translate(-10px, 0);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>

标签： javascriptcssreactjstogglestylesheet

Answer 1

动态类名的值应该是“toggle day”或“toggle night”，因此创建了一个变量“dayNightClass”来保存取决于toggle 值的值。除此之外，一切都一样。

const {useState} = React;

const Toggle = ({ toggled, onClick }) => {
    const dayNightClass = (toggled ? "toggle night" : "toggle day");
    return (
        <div onClick={onClick} className={`${dayNightClass}`}>
            <div className="notch">
                <div className="crater" />
                <div className="crater" />
            </div>
            <div>
                <div className="shape sm" />
                <div className="shape sm" />
                <div className="shape md" />
                <div className="shape lg" />
            </div>
        </div>
    );
}

const App = () => {
  const [toggled, setToggled] = useState(true);
    const handleClick = () => setToggled((s) => !s);
    return (
        <div className="App">
            <Toggle toggled={toggled} onClick={handleClick} />
        </div>
    );
};

ReactDOM.render(
  <App />,
  document.getElementById("react")
);

.toggle {
    height: 100px;
    width: 200px;
    border-radius: 50px;
    margin: auto;
    background-image: linear-gradient(aqua, skyblue);
    position: relative;
    cursor: pointer;
}

.toggle.night {
    background-image: linear-gradient(midnightblue, rebeccapurple);
}

.notch {
    height: 90px;
    width: 90px;
    border-radius: 50%;
    background: yellow;
    position: absolute;
    top: 5px;
    left: 5px;
    box-shadow: 0 0 5px yellow;
    z-index: 1;
    transition: all 0.3s ease;
}

.notch > .crater {
    background: burlywood;
    border-radius: 50%;
    position: absolute;
    opacity: 0;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.4) inset;
}
.night .crater {
    opacity: 0.4;
}

.crater:first-child {
    left: 5px;
    top: 15px;
    height: 15px;
    width: 40px;
    transform: rotate(-45deg);
}

.crater:last-child {
    right: 10px;
    top: 15px;
    height: 15px;
    width: 25px;
    transform: rotate(45deg);
}

.night > .notch {
    background: whitesmoke;
    box-shadow: 0 0 5px whitesmoke;
    transform: translate(100px, 0);
}

.shape {
    position: absolute;
    background: whitesmoke;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.shape.sm {
    height: 5px;
    width: 50px;
    top: 50%;
    left: 60%;
}

.shape.md {
    height: 10px;
    width: 75px;
    top: 25%;
    left: 25%;
    z-index: 2;
}

.shape.lg {
    height: 15px;
    width: 100px;
    bottom: 20px;
    left: 25%;
}

.night .shape {
    background: lightgray;
    box-shadow: 0 0 10px 2px violet;
}

.night .shape.sm {
    height: 5px;
    width: 5px;
    transform: translate(-40px, 0);
}

.night .shape.sm:first-of-type {
    transform: translate(-80px, -10px);
}

.night .shape.md {
    height: 10px;
    width: 10px;
    transform: translate(10px, 0);
}

.night .shape.lg {
    height: 15px;
    width: 15px;
    transform: translate(-10px, 0);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>