根据状态反应条件渲染

Question

我只是想知道什么是最有效/最优雅的方式？

我有一个组件，它将根据百分比设置颜色。当前，该功能无法正常工作。

const App = () => {
  const [progress, setProgress] = useState(51);
  const [color, setColor] = useState("");

  const updateColor = color => {
    if (progress >= 35) {
      setColor("#E75143");
    } else if (progress < 36 && progress > 60) {
      setColor("#FFBF00");
    } else if (progress < 61) {
      setColor("#13D1C5");
    }
  };

  return (
    <div>
      <Progress
        /* strokeColor={updateColor(color)} */ strokeColor={color}
        percent={progress}
      />
    </div>
  );
};

export default App;

Answer 1

如果我们谈论一个更“优雅”的解决方案，我会建议使用color config这样的东西，因为它更“可维护”：

// This object can be used across all applications.
const COLORS = {
  OPTION1: {
    color: 'FFBF00',
    interval: [0, 34]
  },
  OPTION2: {
    color: '#E75143',
    interval: [35, 60]
  },
  OPTION3: {
    color: '#13D1C5',
    interval: [60, 100]
  }
};

const getOptionByProgress = progress => {
  return Object.values(COLORS).find(({ interval }) => {
    const [min, max] = interval;
    return min <= progress && progress <= max;
  });
};

const App = () => {
  const [progress, setProgress] = useState(51);
  return (
    <Progress
      strokeColor={getOptionByProgress(progress).color}
      percent={progress}
    />
  );
};

export default App;

Answer 2

不需要颜色状态。使用一种方法来检索颜色。

const App = () => {
  const [progress, setProgress] = useState(59);

  const updateColor = () => {
    if (progress >= 35 && progress < 60) {
      return "#E75143"
    } else if (progress < 35 ) {
      return "#FFBF00"
    } else if (progress >= 60) {
      return "#13D1C5";
    }
  };

  return (
    <div>
      <Progress
        /* strokeColor={updateColor(color)} */ strokeColor={updateColor()}
        percent={progress}
      />
    </div>
  );
};

Answer 3

创建一个效果，将color设置为progress作为依赖项：

useEffect(() => {
  setColor(progress >= 35 ? '#E75143' : '#13D1C5')
}, [progress])

每次progress状态改变效果时，都会设置color。