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

Question

我有以下想法：

我想展示一堆来自 Reactstrap 的 Card-Components。每个 Card-Components 都有另一个组件，它显示一个进度条以显示重新加载的时间。使用回调函数将其传递给重新加载时间结束时触发的子组件，效果很好。

现在我想到了如何管理 Card-Component 中的数据。数据取自第三方API（简单JSON）。我试图在 Sails.JS Helper.

中实现这个数据获取逻辑

但我无法从该组件内部调用全局 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;

我的 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

你不能访问反应组件内部的sails对象，因为你的组件的代码在客户端执行，sails对象在服务器端是全局可访问的你的申请。

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

Sails.JS globals in React.JS

javascript

node.js

reactjs

sails.js