Вызов функции из события щелчка старшей диаграммы в реагирующих

Question

У меня есть сводная страница в отдельном js-файле. Внутри другого домашнего js-файла я использую старшую диаграмму, чтобы показать график для каждой службы, и по щелчку полосы на диаграмме я хочу отобразить сводную страницу. Я новичок в разработке интерфейсов и публикую это после большого количества поисков в течение всего дня. Все ссылки, которые я посетил, подсказывают, как посетить внешнюю ссылку или предупреждение или вызвать функцию компонента в том же файле при событии щелчка. Но не то, что я ищу.

Мой вариант сводки графиков старшей диаграммы на домашней странице:

 plotOptions: {
                        bar : {
                          stacking: 'normal',
                          dataLabels: {
                            enabled: true,
                            format: '{point.y}',
                            color: 'black'
                          },
                            states: {
                              hover:{
                                enabled: true,
                                brightness: -0.3
                              }
                            },
                            cursor: 'pointer',

                              events:{
                                 alert(e.point.name) // works
                                 <Summary component={e.point.name}/> // doesn't work in loading the summary page

                                     }
                                    }
                        }

Я только начал разработку внешнего интерфейса, и я не понимаю, как отобразить страницу сводки, передав соответствующиекомпонент на случай нажатия на его гистограмму. Спасибо за помощь в этом

Answer 1

Вы можете использовать state, чтобы изменить вид. Полный рабочий пример ниже:

class SomeComponent extends React.Component {
  render() {
    return <div>{this.props.name}</div>;
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      renderChart: true,
      pointName: ""
    };
  }

  render() {
    return (
      <div>
        {this.state.renderChart ? (
          <HighchartsReact
            highcharts={Highcharts}
            options={{
              series: [
                {
                  data: [["one", 1], ["two", 2], ["three", 3]],
                  point: {
                    events: {
                      click: (function(component) {
                        return function() {
                          component.setState({
                            renderChart: false,
                            pointName: this.name
                          });
                        };
                      })(this)
                    }
                  }
                }
              ]
            }}
          />
        ) : (
          <SomeComponent name={this.state.pointName} />
        )}
      </div>
    );
  }
}

---

Демонстрационная версия: https://codesandbox.io/s/highcharts-react-demo-pjfvu