首页 文章

如何将React方法添加到React之外的对象

提问于
浏览
0

所以,这里真的很简单 . 我正在使用React Highcharts Official和ReactHighcharts的options属性我想从另一个文件导入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()
};

好的,所以我知道我可以在我的反应渲染区域中有这个文件,但如果我在我的系列代码上有这个声明,有没有办法导入它,如上所示?

3 回答

  • 1

    欢迎来到 Stack overflow :)

    假设我们可以将您的对象转换为一个函数,该函数接受一个参数,该参数是您想在其中使用的函数,并返回一个Object .

    Example:

    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);

    没有将组件用于不必要的逻辑工作 .

  • -1

    您可以简单地将新属性分配给 constructor 中的 graphOptions 对象,已经可以访问相应的方法:

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

    现场演示:https://codesandbox.io/s/m7xvq7z468

  • 0

    一种方法是导出函数,即getGraphOptions而不是object,然后在导入后,将其与当前反应类的 this 绑定 .

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

    并在反应文件中 .

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

相关问题