在地图功能中反应条件渲染组件

Question

我在一个项目中使用MomentJS，该项目从JSON文件获取数据并输出时间。

time-example.json

"delay": "PT4M",

在我的组件中，我能够成功地将时间（以分钟为单位）呈现为JSON中各种数据点的时间：

delay.jsx

 <span>{moment.duration(gapTime, "seconds").asMinutes()}</span>

现在，我正在尝试编写一个三元语句，该语句将根据时间呈现不同的CSS样式。

如果时间<300（少于5分钟），则我想显示某种CSS样式，如果更大，则要显示另一种样式。

const Delay = ({ data }) => {
  const [gapTime, setGapTime] = useState(data.gap);

  return (
    <>
      <div>
        {gapTime < 300 ? (
          <div className={style.boxLow}>
            <span>{moment.duration(gapTime, "seconds").asMinutes()}</span>
          </div>
        ) : (
          <div className={style.boxHigh}>
            <span>{moment.duration(gapTime, "seconds").asMinutes()}</span>
          </div>
        )}
      </div>
    </>
  );
};
export default Delay;

这是一个非常简单的条件语句，但是由于某些原因，它只会在三元语句（boxHigh）中显示第二个类。在三元组中，Moment设置初始时间是否有误？

Answer 1

您的组件没有重新呈现，因为它的状态没有改变。即使您的data.gap道具可能已更改，它仍设置为您对其初始化的内容。如果您希望在更改道具时重新渲染/更新组件，请不要将状态设置为道具，而应直接使用道具。

如果您希望每次data.gap更改时都重新渲染组件，请直接使用道具

const Delay = ({ data }) => {

return (
  <>
    <div>
      {props.data.gap < 300 ? (
        <div className={style.boxLow}>
         <span>{moment.duration(gapTime, "seconds").asMinutes()}</span>
        </div>
      ) : (
        <div className={style.boxHigh}>
          <span>{moment.duration(gapTime, "seconds").asMinutes()}</span>
        </div>
      )}
    </div>
  </>
);
};

export default Delay;

Answer 2

可以尝试：

<div className={gapTime < 300 ?style.boxLow:style.boxHigh}>
    <span>{moment.duration(gapTime, "seconds").asMinutes()}</span>
</div>