React.JS中的Sails.JS全局變量

Question

我有以下想法：

我想顯示一堆來自Reactstrap的Card-Components 。 每個卡組件均具有另一個組件，該組件顯示進度條以顯示重新加載時間。 使用回調函數將其傳遞給子組件時，效果很好，該子組件在重新加載時間結束時觸發。

現在，我考慮了如何管理Card-Component內部的數據。 數據是從第三方API（簡單JSON）獲取的。 我試圖在Sails.JS Helper中實現此數據獲取邏輯。

但是我無法從該組件內部調用全局sails對象。 我啟用了sails在全球范圍內對象config/globals.js ：

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

這是我正在使用的Card-Component：

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;

我的ProgressBar組件看起來像：

import React, {Component} from 'react';
import { Progress } from 'reactstrap';

class ProgressBar extends Component {
    constructor(props) {
        super(props);
        this.state = {
            reloadedCounter: 0,
            currentProgBarPercent: 0
        };
        this.updateProgBar = this.updateProgBar.bind(this);
    }

    updateProgBar() {
        if(this.state.currentProgBarPercent == 100) {
            if(typeof(this.props.callback) === 'function') {
                this.props.callback();
            }
            this.setState({
                reloadedCounter: 0,
                currentProgBarPercent: 0
            });

        } else {
            this.setState({
                reloadedCounter: this.state.reloadedCounter + 1,
                currentProgBarPercent: (this.state.reloadedCounter + 1) * (100 / (this.props.parentUpdateMillis / this.props.updateMillis))
            });
        }
    }

    componentDidMount() {
        setInterval(this.updateProgBar, this.props.updateMillis);
    }

    render() {
        return(
            <div>
                <Progress value={this.state.currentProgBarPercent} />
            </div>
        );
    };
}

export default ProgressBar;

和我的助手：

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

我無法弄清楚我在做什么錯

Answer 1

您無法訪問react組件內部的sails對象，因為組件的代碼在客戶端執行，而sails對象在應用程序的服務器端可全局訪問。