Как добавить метод React к объекту вне React

Question

Итак, действительно простая проблема здесь.Я использую React Highcharts Official и для атрибута options ReactHighcharts я хочу импортировать graphOptions из другого файла.

<ReactHighcharts highcharts={Highcharts} options={graphOptions} />

Теперь это будет легко, однако для файла япытаясь импортировать, у меня есть метод с именем this.addData ().

export const graphOptions = {
    title: {
        text: 'title '
    },
    yAxis: {
        title: {
            text: 'Points'
        }
    },
    xAxis: {
         title: {
            text: 'Date'
        }
     },
    series: this.addData()
};

Хорошо, я знаю, что у меня может быть этот файл в моей области реагирующего рендера, но есть ли способ импортировать его туда, если у меня есть выражение this в моем коде серии, как показано выше?

Answer 1

Одним из способов может быть экспорт функции, то есть getGraphOptions вместо объекта, а затем после импорта связать ее с this текущего класса реакции.

export const function getGraphOptions() {
   return {
    // object
    series: this.addData()
}

и в файле реакции.

import { getGraphOptions } from './...'
this.getGraphOptions = getGraphOptions.bind(this);

Answer 2

Вы можете просто назначить новое свойство для объекта graphOptions в constructor, уже имея доступ к соответствующему методу:

import options from "./options.js";

class App extends React.Component {
  constructor(props) {
    super(props);

    options.series = this.addData();
    this.state = {
      options: options
    };
  }

  addData() {
    return [
      {
        data: [1, 2, 3]
      }
    ];
  }

  render() {
    return (
      <HighchartsReact highcharts={Highcharts} options={this.state.options} />
    );
  }
}

Live demo: https://codesandbox.io/s/m7xvq7z468

Answer 3

Добро пожаловать в Переполнение стека :)

Допустим, мы можем преобразовать ваш объект в функцию, которая принимает параметр, который является функцией, которую вы хотите использовать внутри него, и возвращает объект.

Пример:

export const getGraphOptions = (cb) => {
    title: {
        text: 'title '
    },
    yAxis: {
        title: {
            text: 'Points'
        }
    },
    xAxis: {
         title: {
            text: 'Date'
        }
     },
    series: cb()
};

Итак, у нас есть эта функция, getGraphOptions(cb), которая получает функцию обратного вызова и возвращает нужный объект, теперь, вВаш компонент вы после того, как импортируете его, у нас может быть что-то вроде этого, может быть, в методе render():

const graphOptions = getGraphOptions(this.addData);

без использования компонента в ненужной логической работе.