ReactJS изменяет содержимое div из события onClick()

ProgramBox

ReactJS изменяет содержимое div из события onClick()

Post author:admin
Запись опубликована:13 января, 2022
Post category:Вопросы по программированию

#javascript #reactjs

Вопрос:

У меня концептуальная проблема. Здесь следует «псевдокод», где отображается график прогноза температуры вместе с кнопкой рядом с ним. Я хочу сделать так, чтобы при нажатии на кнопку график прогноза температуры менялся на график прогноза осадков, и наоборот.

App.js

 import React, { useState } from 'react';
import DataFetcher from './fetch_data.js';
import { graphBuilderTemperature, changeGraph } from './helper_functions.js';

let graphState = "temp";

function App() {
   const { weather, forecastWeather } = DataFetcher();
   return (
      <main>
         //(... a bunch of div parents and siblings here)
          <div className="forecast_graph">
             {graphBuilderTemperature(forecastWeather)}
             <button className="forecast_graph_reload" onClick={() => changeGraph(forecastWeather, graphState)}></button>
          </div>
      </main>
   )
}

helper_functions.js

  //Function that returns a `BarChart` element. From the ReactJs Rechart library for generating charts.
export const graphBuilderTemperature = (forecastWeather) => {
   //(...)
      
   return (
      <BarChart
         //(... temperature forecast chart)
      </BarChart>
   )
 }

export const graphBuilderPrecipitation= (forecastWeather) => {
   //(...)
      
   return (
      <BarChart
         //(... precipitation forecast chart)
      </BarChart>
   )
 }

//function that executes `onClick()` which should change the chart displayed
export const changeGraph = (forecastWeather, graphState) => {
    if(graphState === "temp") {
        graphState = "precipitation"; 
        return (graphBuilderPrecipitation(forecastWeather));
    }else {
        graphState = "temp"; 
        return (graphBuilderTemperature(forecastWeather));
    }
}

В настоящее время код достигает соответствующих вызовов функций с onClick() помощью, но всякий раз , когда возвращается новый элемент div, содержащий новую диаграмму, он не отображается(обновляется) на моем экране с помощью возврата компонента react App() .

Похоже, я совершаю здесь какую-то концептуальную ошибку. Я не уверен, как вернуть элемент из onClick() метода, из возврата основного класса компонентов react. Заранее прошу прощения за непроизносимость кода.

Есть ли у кого-нибудь хоть какое-то представление о том, что я делаю неправильно, или как я могу достичь того, о чем забочусь?

1. Вы хотите отобразить два компонента на основе условия? Если да, то это можно сделать намного проще.

2. Ваша changeGraph функция возвращает правильный скомпилированный график, но нигде его не отображает. Может быть, вам нужна еще одна функция, которая вызывает changeGraph и загружает ее в ваш div className="forcast_graph"

3. @CVerica Да, я полагаю, что именно это и происходит. Но точная проблема в том, что я не понимаю, как отобразить новую диаграмму на старую диаграмму в моем div className="forecast_graph" . Как может помочь дополнительная функция?

4. Вы пробовали создавать информацию state , а затем использовать оператор условного if для переключения между ними? Нравится: <div>{condition ? state1 : state2}</div>

5. Все здесь опередили меня в этом, но да, я также заметил, что вы вообще не использовали штат. Рад, что это сработало!

Ответ №1:

Я думаю, что ваша проблема связана с тем, что ваше приложение не перерисовывается. Реагируйте на повторную визуализацию приложений при изменении состояния приложения.

Вы можете попробовать использовать useState() его, чтобы определить, какой тип графика должен отображаться, и ваша кнопка будет переключаться между обоими типами графиков.

 const [graphType, setGraphType] = useState("temp")

const changeGraph = () => {
    graphType === "temp" ? setGraphType("precipitations") : setGraphType("temp")
}

Затем в компоненте вашего приложения, где вы хотите отображать свои графики, вы можете сделать что-то вроде этого:

 {graphType === "temp"? graphBuilderTemperature(forecastWeather) : graphBuilderPrecipitation(forecastWeather) }