让 API 在 JSX 中工作答案

【问题标题】：Getting API to work in JSX让 API 在 JSX 中工作
【发布时间】：2016-12-07 01:17:12
【问题描述】：

下面的代码来自我的容器，但如果我只提取 Twilio API 并将其放置在单独的 .js 文件中，则当我使用节点在 CLI 上执行它时它可以工作，但不能在我的 JSX 文件中执行。我需要它在我的 getTime 方法中单击一个按钮来执行，但是每次我尝试在合并 twilio 模块后使用 webpack 构建我的应用程序时，我都会收到错误消息，指出“找不到网络”、“找不到 tls”和“找不到 fs”。我可以做些什么来解决这个问题，并将 Twilio api 合并到我的代码中。

 import React, { Component, PropTypes } from 'react';
var firebase = require('firebase');
var hash = require('object-hash');

var AccountSid = "**********";
var AuthToken = "*************";
var twilio = require('twilio');
var client = new twilio.RestClient(AccountSid, AuthToken);

export default class App extends Component {

componentWillMount(){
        //Send an SMS text message
client.messages.create({ 
    to: "+15558675309", 
    from: '+**', 
    body: "This is the ship that made the Kessel Run in fourteen parsecs?", 
    mediaUrl: "https://c1.staticflickr.com/3/2899/14341091933_1e92e62d12_b.jpg",  
});
    }
    getTime(){
        var localTime = new Date();
        var bob = {first: 'Bob', last: 'Samuels', time: localTime };
        var convert = localTime.toLocaleString();
        alert(hash(bob));
        alert(convert);
    }
    render(){
  return (
    <div>
      <h1>YES !</h1>
      <button onClick ={ this.getTime }>Clock In</button>
      <button onClick ={ this.getTime }>Clock Out</button>
    </div>
  );
 }

【问题讨论】：

您可能会收到这些错误，因为您正尝试在客户端加载服务器端库。您可能需要客户端应用程序调用的服务器端代理（节点服务器）
所以我应该制定一条路线来处理请求？现在我有 react-router 处理我所有的路由@azium
是的，所以 react-router 是一个客户端库（在用户浏览器上运行）。您可能需要创建一个调用 twilio 的代理服务器（节点/express），然后从浏览器调用您的 express 端点
谢谢！你能给我举个例子吗？如果您将其列为答案，我一定会接受它。 @azium
完全是的，只需公开一个不同的端点，例如处理 twillio 逻辑的 /api/createMessage，然后从 react 中命中该端点

标签： javascript node.js reactjs twilio jsx

【解决方案1】：

来自@azium：

您收到这些错误是因为您正在尝试加载服务器客户端上的侧库。你可能需要一个服务器端代理（节点服务器），您的客户端应用程序调用

只需公开一个不同的端点，例如 /api/createMessage 来处理 twilio logic，并从反应中击中那个端点

【讨论】：