条件（三元）运算符答案

【问题标题】：Conditional (ternary) operator条件（三元）运算符
【发布时间】：2020-03-06 21:05:28
【问题描述】：

我有一个按钮，它会生成随机颜色并使用该颜色值设置颜色状态。

然后，该颜色状态将用于设置 div 的背景颜色。

在 div 内部有一个锁定/解锁按钮，可以将锁定状态设置为 true/false；

现在我遇到问题的部分是在样式元素中使用全能运算符：

我想要它做的是：

如果解锁：改变颜色

如果锁定：不改变颜色并保持不变

import React, { Fragment, useEffect, useState } from "react";

export default function Pallete({ changeColor }) {
const [locked, setLocked] = useState(false)
  const [color, setColor] = useState(
    "#" + (((1 << 24) * Math.random()) | 0).toString(16)
  );

  useEffect(() => {
    const randomColor = "#" + (((1 << 24) * Math.random()) | 0).toString(16);
    setColor(randomColor);
  }, [changeColor]);


const lockButton = () =>{
  setLocked(!locked)
}

  return (
    <Fragment>
      <div
        ***style={{ backgroundColor: !locked? color: color }}***
        className="w-100 d-flex flex-column align-items-center justify-content-center"
      >
        <h1>#FF00FF</h1>
        <button className="btn btn-dark" onClick={lockButton}>UNLOCK</button>
      </div>
    </Fragment>
  );
}

【问题讨论】：

链接：codesandbox.io/s/smoosh-water-l3oj0
当你尝试在 style 上使用三元条件时是否有错误？
您是否特别想要有关三元运算符的信息以及为什么它在这里不起作用，或者只是一个使代码起作用的解决方案？
@KevinGilbert 不，如果解锁它会改变颜色，如果锁定它会移除颜色

标签： javascript reactjs

【解决方案1】：

我更改了您的代码的两部分：

useEffect(() => {
    if(locked){ // check if its locked or not
      const randomColor = "#" + (((1 << 24) * Math.random()) | 0).toString(16);
      setColor(randomColor);
    }
}, [changeColor, locked]); // add locked to watch for

您也可以删除!locked ? color : color 部分：

style={{ backgroundColor: color }}

【讨论】：

【解决方案2】：

据我了解，这是解决方案：

    useEffect(() => {

            if (!locked) {
               const randomColor = "#" + (((1 << 24) * Math.random()) | 0).toString(16);
               setColor(randomColor);
            }
            }, [changeColor, locked]);

然后在样式对象中将背景设置为不带三元运算符的颜色。

【讨论】：

【解决方案3】：

选项1）就像你说的......你试过了吗？

<Component style={{background: locked ? '#f00' : 'f0f'}} />

选项 2 ) 在 Return 语句之前，定义样式。

const style = foo ? '...' : '...'

<Component style={style} />

【讨论】：

我认为这行不通。原因是：如果 !locked 它仍然会生成随机颜色并且不会保持相同