Javascript 如何正确地将图像分配给状态和功能？

我是新手。我想创建一个函数，它使用一个随机数来动态更改3个图像

示例：如果编号>5=图像1，如果编号>10=图像2，如果编号>15=图像3

我已经尝试了一些方法，但这是我能得到的最好结果：

（{color:green}）

是一个

const green = { backgroundImage: "url(" + tirelogogreen + ")";

---

想法是你的

状态

s应该只包含真正简单的数据，与样式无关。例如，这里我存储了一个数字

const [myNum, setMyNum] = useState(0);

然后我有一个更新状态的按钮：

<button onClick={() => setMyNum(Math.floor(Math.random() * 20))}>

setMyNum（Math.floor（Math.random（）*20））}>

然后，您的组件将根据数字决定如何处理它

function Box(props) {
  // here i am getting different style based on what's being passed in
  const getStyle = myNum => {
    if (myNum > 4 && myNum < 10) return { backgroundColor: "green" };

    if (myNum > 10 && myNum < 15) return { backgroundColor: "blue" };

    if (myNum > 14) return { backgroundColor: "red" };

    return null;
  };

  return (
    <div className={"square"} style={getStyle(props.colorNum)}>
      <div className={"content"}>I'm a square.</div>
    </div>
  );
}

功能盒（道具）{
//在这里，我得到了不同的风格的基础上被传递
const getStyle=myNum=>{
如果（myNum>4&&myNum<10）返回{backgroundColor:“green”}；
如果（myNum>10&&myNum<15）返回{backgroundColor:“blue”}；
如果（myNum>14）返回{backgroundColor:“red”}；
返回null；
};
返回(
我是一个正方形。
);
}

---

对于一个工作示例，请单击此处：

将您的代码发布到问题本身中，代码的图片不可读（更不用说无法复制用于测试目的）当然，对此表示抱歉。修正了这个问题@PatrickEvans

状态

应仅包含数据。它不应该包含样式和图像。。我原以为我可以这样做。。现在这让事情变得更复杂了

function Box(props) {
  // here i am getting different style based on what's being passed in
  const getStyle = myNum => {
    if (myNum > 4 && myNum < 10) return { backgroundColor: "green" };

    if (myNum > 10 && myNum < 15) return { backgroundColor: "blue" };

    if (myNum > 14) return { backgroundColor: "red" };

    return null;
  };

  return (
    <div className={"square"} style={getStyle(props.colorNum)}>
      <div className={"content"}>I'm a square.</div>
    </div>
  );
}