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

【问题标题】：How can I assign properly a image to state and function?如何正确地将图像分配给状态和功能？
【发布时间】：2019-11-21 20:25:01
【问题描述】：

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

示例：如果数字 > 5 = image1，如果数字 > 10 = image2，如果数字 > 15 = image3

我现在已经尝试了一些东西，但这是我能得到的最好结果：

random(min,max,x) {
    min = Math.ceil(5);
    max = Math.floor(20);
    return  x = Math.floor(Math.random() * (max - min)) + min;
}

colormachine = () => {
if(this.random(this.props.x > 8))
{
    this.setState(state => ({color: green}));
};
}

render() {

    console.log(this.random());
    // console.log(this.colormachine());

({ color: green }) 是一个

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

【问题讨论】：

将你的代码贴到问题本身，代码图片不可读（更不用说不能复制用于测试目的）
当然，抱歉。修正了这个问题。 @PatrickEvans
state 应该只包含数据。它不应包含样式和图像。
啊，好吧..我以为我可以那样做..现在变得更复杂了

标签： javascript reactjs state assign

【解决方案1】：

这个想法是你的states 应该只包含非常简单的数据，与样式无关。例如，这里我存储了一个数字。

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

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

<button onClick={() => 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>
  );
}

有关工作示例，请单击此处：https://codesandbox.io/s/react-boilerplate-h2dbd

【讨论】：