如何根据marketStatus函数返回值设置对应文本颜色？

方案1：内联样式直接控制 #

先把市场状态结果存为变量避免重复计算，再通过内联样式设置颜色：

// 先在组件内获取状态
const marketState = marketStatus();

// 然后在JSX中渲染
<div className="username-container">
  <div className="username-badge">
    {greeting()} {Auth?.user?.username}, the NYSE is{" "}
    <span style={{ color: marketState === 'open' ? 'green' : 'red' }}>
      {marketState}
    </span>.
  </div>
</div>

方案2：用CSS类名管理样式 #

先在样式文件里定义两个类：

.market-status-open {
  color: green;
}
.market-status-closed {
  color: red;
}

然后在JSX中根据状态切换类名：

const marketState = marketStatus();

<div className="username-container">
  <div className="username-badge">
    {greeting()} {Auth?.user?.username}, the NYSE is{" "}
    <span className={marketState === 'open' ? 'market-status-open' : 'market-status-closed'}>
      {marketState}
    </span>.
  </div>
</div>

这种方式更适合后续需要扩展样式（比如添加背景色、调整字体粗细）的场景。

方案3：封装成独立组件（适合多处复用） #

如果这个状态显示在多个页面用到，封装成组件更方便维护：

// 单独定义组件
const MarketStatus = () => {
  const state = marketStatus();
  return (
    <span style={{ color: state === 'open' ? 'green' : 'red' }}>
      {state}
    </span>
  );
};

// 调用处使用
<div className="username-container">
  <div className="username-badge">
    {greeting()} {Auth?.user?.username}, the NYSE is <MarketStatus />.
  </div>
</div>

内容的提问来源于stack exchange，提问作者LearningBeNice