React中如何根据日期差值正确渲染图表或指定内容？

让我来帮你搞定这个问题，实现你想要的效果：当日期差值不为0时显示折线图卡片，否则显示“Hola George!”文本。你的代码里有两个核心问题需要调整：

问题分析 #

1. 条件判断逻辑颠倒：当前代码在difference_days != 0时返回文本，和你的需求完全相反；
2. JSX返回错误：else分支里你创建了<Card />元素，但没有直接返回它，反而最后返回了Card组件本身（这是组件的引用，不是可渲染的React元素）。

修正后的完整代码 #

contenidoNuevo = () => {
  // 反转条件：当差值为0时显示文本，否则显示图表
  if (this.state.difference_days === 0) {
    return <h1>Hola George!</h1>;
  } else {
    console.log(this.state.prueba);
    // 直接返回渲染好的Card组件实例，而不是组件引用
    return (
      <Card 
        title="Conversaciones por día del mes" 
        chartType="line" 
        labels={Object.keys(this.state.day_month_conversation)} 
        datasets={[
          {
            label: 'Número de conversaciones actuales',
            fill: false,
            lineTension: 0.1,
            backgroundColor: '#F07C30',
            borderColor: '#FA6A01',
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            pointBorderColor: '#F07C30',
            pointBackgroundColor: '#FA6A01',
            pointBorderWidth: 1,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: '#F07C30',
            pointHoverBorderColor: '#FA6A01',
            pointHoverBorderWidth: 2,
            pointRadius: 1,
            pointHitRadius: 10,
            data: Object.values(this.state.day_month_conversation)
          }
        ]} 
      />
    );
  }
}

render() {
  return (
    // 你的其他渲染内容保持不变
    <div className="row">
      <div className="col-12 mb-30">
        {this.contenidoNuevo()}
      </div>
    </div>
  );
}

关键修改说明 #

• 反转条件判断：把if (this.state.difference_days != 0)改成if (this.state.difference_days === 0)，这样就能实现“差值为0时显示文本，否则显示图表”的逻辑；
• 正确返回JSX元素：在else分支里直接return你定义好的<Card />组件实例，而不是返回Card组件本身。之前的写法相当于告诉React“渲染这个组件类”，而不是渲染一个已经配置好props的组件实例；
• （可选）给多行JSX加上小括号包裹，让代码结构更清晰，避免自动分号插入导致的潜在问题。

这样修改后，你的组件就能按照预期的逻辑渲染内容啦！

内容的提问来源于stack exchange，提问作者Jorge De La Vega Carrasco