传递函数元素以在 js 中呈现

Question

我在 js 中有一个名为 contenidoNuevo() 的 class 函数，它根据我在 Web 应用程序中的日期差异触发。在 else 语句中，我有一个 Card class，其中包含来自 react-chartjs-2 的折线图。我想在我的渲染组件中触发 contenidoNuevo class。现在，如果我的天差不为 0，则显示的是 Hola George！，如果日期不为 0，我想显示图表。我怎样才能实现它？谢谢！

contenidoNuevo 函数：

contenidoNuevo = () => {
   if (this.state.difference_days != 0) {
     return <h1>Hola George!</h1>
   }
   else {
     console.log(this.state.prueba)

     <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)   
             }
         ]}
     />

    return Card
}

渲染（）：

render() {
  return (
   .
   .
   .

  <div className="row">
    <div className="col-12 mb-30">
      {this.contenidoNuevo()}
    </div>
  </div>
}

Answer 1

假设您正在使用 react-native（我的意思是构建一个应用程序）并且卡片已经创建，请尝试为下一个代码替换您的函数：

function contenidoNuevo () {
    var Obj = this.state.difference_days;

    return <>

        {Obj != 0 &&
            <View>Hola George!</View>
        }

        {Obj == 0 && 
            <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)
                    }
                ]}
            />
        }
    </>
}

希望对你有所帮助。

传递函数元素以在 js 中呈现

Pass function elements to render in js

javascript

reactjs

chart.js

react-native

react-chartjs