React组件显示控制问题：倒计时结束隐藏CountDownSquare并显示文本

核心问题分析 #

1. 你写的三元表达式放在了return语句外面，根本不会被渲染到页面中，这是逻辑不生效的关键原因。
2. return里直接硬编码了<CountDownSquare>，完全忽略了showCountdown的状态，所以组件会一直显示。
3. 三元表达式里返回styles.homeBody是错误的——你需要返回包含h3的JSX元素，而不是单纯的样式类名。
4. 没有处理homePageData为空的边界情况，直接访问homePageData[0]可能引发报错。

修正后的代码 #

const { homePageData } = props;

return (
  homePageData?.length > 0 ? (
    <Layout>
      <div className={styles.Home}>
        <Image src={wordmark} alt="Hammer and Hope wordmark" />
        {/* 动态切换倒计时组件和主文本 */}
        {homePageData[0].showCountdown ? (
          <CountDownSquare />
        ) : (
          <div className={styles.homeBody}>
            <h3 className={styles.mainText}>{homePageData[0].mainText}</h3>
          </div>
        )}
        <Nav />
      </div>
    </Layout>
  ) : null
);

关键修改说明 #

• 将三元表达式移到return的JSX内部，确保状态变化能触发视图更新。
• 移除硬编码的<CountDownSquare>，改为根据showCountdown的值动态渲染对应内容。
• 把原来注释的homeBody容器放到三元的else分支，正确展示主文本。
• 增加homePageData?.length > 0的判断，避免空数据时访问数组下标报错。

额外提示 #

要确保CountDownSquare组件在倒计时结束后，能通过props回调等方式更新homePageData里的showCountdown状态——只有状态发生变化，三元表达式才会重新执行并切换视图。

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