reactjs - 如何将函数中的假 API 包含到 React.JS 应用程序中

Question

我不知道如何包含现有函数中的假日期。我用 redux 创建了一个应用程序。简单的测试就可以了。

当我在 HTML 中包含日期并调用函数 FruitasticApi 时，一切正常。但是如果我想导入到组件，我会收到错误，因为我的假日期文件中没有导出

我有 FruitasticApi.js(其中有一些带有数据的数组)。

这是 FruitastaticApi.js

(function(container) {
  var names = [
    'Chris', 'Svetla', 'Duncan', 'Vlad', 'Dennis', 'Amir', 'Kunjan', 'Aaron', 'Kirby', 'Michael',
    'Bryan', 'Edward', 'Stan', 'Eric', 'Jennifer', 'Kristy', 'Jason', 'Phoebe', 'Kate', 'Denise',
    'Abigail', 'Ethan', 'Lucia', 'Harry', 'David', 'Cameron', 'Erica', 'Sophie', 'Francis', 'Brian',
    'Paco', 'Luke', 'Margie', 'Sacha', 'Desmond', 'Ruby', 'Wanda', 'Rosalie', 'Angel', 'Layla', 'Flynn',
    'Anthony', 'Jasmine', 'Janie', 'Debbie', 'Keith', 'Porter', 'Francisco', 'Javier', 'Rudolph'
  ];
  var letters = 'ABCDEFGHIJKLMNOPRSTVWY'.split('');
  var fruits = [
    'blackberries', 'apple', 'orange', 'banana', 'pear', 'watermelon', 'cherries', 'mango',
    'grapes', 'apple', 'orange', 'cantaloupe', 'strawberries', 'kiwi', 'pineapple', 'pomegranate'
  ];

  var fruitsAPI = {
    get: function(callback) {
      var iter = 30 + Math.round(Math.random() * 50);

      var fruitIter = 3 + Math.ceil(Math.random() * 4);
      var availFruits = pickFruits(fruitIter);

      var arr = [];
      for (var i = 0; i < iter; i++) {
        var randF = Math.floor(Math.random() * names.length);
        var randL = Math.floor(Math.random() * letters.length);
        var randFruit = Math.floor(Math.random() * availFruits.length);
        arr[i] = {
          name: names[randF] + ' ' + letters[randL] + '.',
          favoriteFruit: availFruits[randFruit]
        }
      }
      var timeout = Math.floor(Math.random() * 500) + 100;
      setTimeout(function() {
        if (callback) {
          callback(arr);
        }
      }, timeout);
    }
  };

  function pickFruits(num) {
    var availFruits = [];
    var rerun = true;
    while (rerun) {
      for (var j = 0; j < num; j++) {
        var index = Math.floor(Math.random() * fruits.length);
        availFruits.push(fruits[index]);
      }
      var seen = availFruits[0];
      for (var i = 1; i < availFruits.length; i++) {
        if (availFruits[i] !== seen) {
          rerun = false;
        }
      }
    }
    return availFruits;
  }

  container.FruitasticApi = fruitsAPI;
})(window);

这就是我尝试做的:

import React, { Component } from 'react';
import { simpleAction } from './actions/fruitaStaticAPI';
import { FruitasticApi } from './FruitasticApi'
import { connect } from 'react-redux';
import './main.css';

class App extends Component {
  render() {
    console.log(FruitasticApi)
    return (
      <div className="App">


      </div>
    );
  }
}
const mapStateToProps = state => ({
  ...state
})
const mapDispatchToProps = dispatch => ({
  simpleAction: () => dispatch(simpleAction())
})
export default connect(mapStateToProps, mapDispatchToProps)(App);

这是我的任务: 通过调用 FruitasticApi.get() 加载数据。

Answer 1

只需进行正常的导出，无需隔离范围:

(function(container) {
//...
})(window);

然后导出(文件中的最后一行)

export const FruitasticApi = fruitsAPI; 

然后，您可以将其导入到组件文件中:

import { FruitasticApi } from './FruitasticApi'

工作示例:https://stackblitz.com/edit/react-wekuan

不要忘记打开控制台

---

或者，如果您必须使用隔离方法，则您的代码将 FruitasticApi 分配给窗口

container.FruitasticApi = fruitsAPI;

因此，您可以使用

将其放入组件文件中

console.log(window.FruitasticApi);

工作示例:https://stackblitz.com/edit/react-wshnyh