React - 單擊按鈕時顯示圖表

Question

我想根據按鈕單擊使用兩個 function 中的任何一個來顯示圖表。 函數是 this.contenidoNuevo() 和 this.contenidoNuevo2()。 如果用戶單擊 btn1，則將顯示 this.contenidoNuevo() 的圖表，如果用戶單擊 btn2，則將顯示 this.contenidoNuevo2()。 此外，this.conetnidoNuevo() 的圖表應該在渲染時顯示，因為它是默認值。 謝謝你的幫助。

功能：

onClick1 = () => {
        return <>
            {this.contenidoNuevo()}
        </>
}
onClick2 = () => {
        return <>
            {this.contenidoNuevo2()}
        </>
}

使成為（）：

<div className="row"
     <button id="btn1" onClick={() => {this.onClick1()}}>
        Option 1
     </button>
     <button id="btn2" onClick={() => {this.onClick2()}}>
        Option 2
     </button>    
     {this.contenidoNuevo()}                                
</div>

Function contenidoNuevo 附圖表：

 contenidoNuevo = () => {
        var Obj = this.state.difference_days;
        var data0 = {}
        var data1 = {}

        return <>
            {Obj == 0 &&  

                <Card
                    title="Conversaciones"
                    chartType="line"
                    labels={Object.keys(this.state.concurrency)}

                    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.concurrency)
                        },
                        {
                            label: 'Número de conversaciones anteriores',
                            fill: false,
                            lineTension: 0.1,
                            backgroundColor: '#FC4C0126',
                            borderColor: '#FC4C0126',
                            borderCapStyle: 'butt',
                            borderDash: [],
                            borderDashOffset: 0.0,
                            borderJoinStyle: 'miter',
                            pointBorderColor: '#C73C00',
                            pointBackgroundColor: '#FC4C01',
                            pointBorderWidth: 1,
                            pointHoverRadius: 5,
                            pointHoverBackgroundColor: '#FC4C01',
                            pointHoverBorderColor: '#C73C00',
                            pointHoverBorderWidth: 2,
                            pointRadius: 1,
                            pointHitRadius: 10,
                            data: Object.values(this.state.horario_uso_before)
                        }
                    ]}
                />             
            }
</>
    
    }

Function contenidoNuevo2 附圖表：

contenidoNuevo2 = () => {
        var Obj = this.state.difference_days;

        return <>
            {Obj == 0 && 
                <Card
                    title="Conversaciones"
                    chartType="line"
                    labels={Object.keys(this.state.horario_uso_before)}

                    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.horario_uso_before)
                        },
                        {
                            label: 'Número de conversaciones anteriores',
                            fill: false,
                            lineTension: 0.1,
                            backgroundColor: '#FC4C0126',
                            borderColor: '#FC4C0126',
                            borderCapStyle: 'butt',
                            borderDash: [],
                            borderDashOffset: 0.0,
                            borderJoinStyle: 'miter',
                            pointBorderColor: '#C73C00',
                            pointBackgroundColor: '#FC4C01',
                            pointBorderWidth: 1,
                            pointHoverRadius: 5,
                            pointHoverBackgroundColor: '#FC4C01',
                            pointHoverBorderColor: '#C73C00',
                            pointHoverBorderWidth: 2,
                            pointRadius: 1,
                            pointHitRadius: 10,
                            data: Object.values(this.state.concurrency) 
                        }
                    ]}
                /> 
                
            }
            
        </>
    
    }

Answer 1

看來您的方法在這里稍有不正確。 React 組件維護自己的 state。 在您的情況下，此 state 是要顯示的內容。 然后，您的按鈕所要做的就是更改此 state 的值，這會自動觸發重新渲染。 以這種方式重新設計的示例組件如下所示

const contenidoNuevo = "First content"
const contenidoNuevo2 = "Second content"

class App extends React.Component {
  constructor(){
    super();
    this.state = {content: contenidoNuevo}
  }
  
  onClick1 = () => {
        this.setState({content: contenidoNuevo})
  }
  onClick2 = () => {
        this.setState({content: contenidoNuevo2})
  }
  
  render() {
    return (
      <div className="row">
        <button id="btn1" onClick={() => {this.onClick1()}}>
          Option 1
         </button>
      <button id="btn2" onClick={() => {this.onClick2()}}>
        Option 2
     </button>    
     {this.state.content}                                
    </div>
    )
  }
}

如果更適合您的用例，您可以更改 onClick 方法來調用函數，而不僅僅是設置值。

Answer 2

考慮執行以下操作，而不是返回組件：

import React, { Component } from 'react';
class Datas extends Component {
    constructor(props){
        super(props)
        this.state = {
                data: ''
        }
    }
    onClick1 = () => {
        this.setState({ data: <h1>d</h1> });
       
    }
    onClick2 = () => {
        this.setState({ data: <h2>d</h2> });
        
    }
    render() {
        return (
            <div className="row">
                <button id="btn1" onClick={() => { this.onClick1() }}>
                    Option 1
                </button>
                <button id="btn2" onClick={() => { this.onClick2() }}>
                    Option 2
                </button>
                {this.state.data}
            </div >
        )
    }
}
export default Datas;

像這樣，當您打印此 state 時，它將根據您按下的按鈕而改變