如何在項目內的其他js文件中調用react組件的一個函數

Question

我有一個名為 FilterBox.jsx 的 React 組件文件，它有一個函數，代碼如下：

addTimeFilter() {
   var clickedItem2 = sessionStorage.getItem("clicked_value");
   const fltr = TIME_FILTER_MAP['__time_range'];
   const vals = '2019-03-25T00:00:00 : 2019-03-26T00:00:00';
   const selectedValues = Object.assign({}, {"__time_range" : "2019-03-25T00:00:00 : 2019-03-26T00:00:00","BrandName" : clickedItem2});
   selectedValues[fltr] = vals;
   this.setState({ selectedValues, hasChanged: true });
   if (this.props.instantFiltering) {
      this.props.onChange(fltr, vals, false, true);
   }
}

我有另一個文件，它是一個.js文件。 我想在.js文件中調用addTimeFilter() 。 請幫助我如何做到這一點。

我試圖像這樣導入它：

 import FilterBox from '../../FilterBox';

然后我嘗試在 .js 文件中的一個函數中執行此操作以調用以下函數：

function select(){
     const filter = new FilterBox();
     filter.addTimeFilter();
}

但只有從 '../../FilterBox' 導入 FilterBox 給我錯誤

Answer 1

您必須導出 addTimeFilter。 然后當你導入函數時試試這個：

---

import { addTimeFilter } from '../../FilterBox';

---

我也有點新的反應，但這樣的事情應該有效！ :)

編輯：嘗試在文件的行中使用“export default FilterBox”導出類

Answer 2

你需要在函數名前寫export關鍵字，讓其他 js 文件知道要導入什么。

export function addTimeFilter() {
/.../
}