Javascript React.JS中的Sails.JS globals

我有以下想法：

我想展示一堆来自我的照片。此卡的每个组件都具有另一个组件，该组件显示一个进度条，以显示重新加载的时间。 使用回调函数将其传递给子组件（重载时间结束时触发）时，效果非常好

现在我考虑如何管理卡组件中的数据。数据从第三方API（简单JSON）获取。我尝试在一个应用程序中实现这个数据获取逻辑

但是我无法从该组件内部调用全局

sails

对象。 我在

config/globals.js

中全局启用了

sails

对象：

/**
 * THIS FILE WAS ADDED AUTOMATICALLY by the Sails 1.0 app migration tool.
 * The original file was backed up as `config/globals-old.js.txt`
 */

 module.exports.globals = {
   _: require('lodash'),
   async: require('async'),
   models: true,
   sails: true
 };

下面是我正在使用的卡片组件：

import React, {Component} from 'react';
import { Card, CardBody, CardImg, CardText, CardHeader, CardFooter } from 'reactstrap';
import { Row, Col } from 'reactstrap';
import { Progress } from 'reactstrap';
import ProgressBar from './ProgressBar';

class MyCard extends Component {
    constructor(props) {
        super(props);
        console.log('Constructed card');
        this.state = {};
        this.progressUpdateCallback = this.progressUpdateCallback.bind(this);
        /*var sails = require(sails);*/
        this.thirdPartyInfo = sails.helpers.thirdPartyInfo();
    }

    progressUpdateCallback() {
        console.log('In callback');
    }

    componentDidMount() {
        console.log('Card component mounted');
    }

    render() {
        return(
            <Col xs={1} sm={2} md={3} lg={4} className="mx-auto">
                <Card className="mt-4">
                    <CardHeader>
                        <Row>
                            <Col xs={2} sm={2} md={2} lg={2}>
                                <img src={this.props.cardLogo} 
                                    className="float-left img-fluid" />
                            </Col>
                            <Col className="text-left">
                                <strong>{this.props.headerText}</strong>
                            </Col>
                        </Row>
                    </CardHeader>
                    <CardBody>
                        <CardText>{this.props.text}</CardText>
                    </CardBody>
                    <CardFooter>
                        <ProgressBar parentUpdateMillis={this.props.updateAfterSeconds * 1000} updateMillis="1000" callback={this.progressUpdateCallback} />
                    </CardFooter>
                </Card>
            </Col>
        );
    };
}

export default MyCard;

但在提起那个洞之后，我在控制台上看到了以下内容：

Uncaught ReferenceError: sails is not defined

---

我无法找出我做错了什么

您无法访问react组件中的

sails

对象，因为组件的代码在客户端执行，

sails

对象在应用程序的服务器端可以全局访问。

您不能访问react组件内的

sails

对象，因为组件的代码在客户端执行，

sails

对象在应用程序的服务器端是全局可访问的。

Ah好的。知道了。您认为实现这种沟通的最佳方式是什么。我在考虑一个action2和RouteEyes，你可以创建一个映射到一个action的路由，它获取你需要的数据，然后你将响应发送到react组件，你可以从

componentDidMount

调用端点，这是获取数据的最佳位置。啊，好的。知道了。您认为实现这种沟通的最佳方式是什么。我正在考虑一个action2和一个RouteEyes，您可以创建一个映射到某个action的路由，该路由获取您需要的数据，然后将响应发送到react组件，您可以从

componentDidMount

调用端点，这是获取数据的最佳位置。

var sprintf = require("sprintf-js").sprintf;

module.exports = {
  friendlyName: 'Some info',
  description: 'Returns some info',

  inputs: {
    what: {
      type: 'string',
      example: 'currentTime',
      description: 'Fetch with information',
      required: true
    }
  },

  exits: {
    success: {
      outPutFriendlyName: 'Information',
      outputDescription: 'TODO: Explain and define the model to return the data'
    },

    infoNotFound: {
      description: 'Could not find the given type of information'
    }  
  },

  fn: function (inputs, exits) {
    var apiURL = sprintf('https://3rdPartySite/v1/%s', inputs.what);
    console.log('Using %s for fetching data from 3rdPartySite', apiURL);

    fetch(apiURL).then( results => {
      return results.json();
    }).then(data => {
      console.log('Info result: %j', data.results);
    });

    // All done.
    return exits.success();
  }
};

Uncaught ReferenceError: sails is not defined