我正在尝试将 API Gateway SDK 添加到 React 代码中,但我对 ES6 和 React 还很陌生,所以很难找到方法
这是我的 React 项目结构:
myReactProject
- node_modules
- src
-- components
---- ApigClient
------ lib (AWS APIGateway JS files)
------ apigClient.js
------ ApigValidation.js
---- otherComponents..
---- index.js
-- containers
---- App
------ App.js
------ App.scss
---- Home
------ Home.js
------ Home.scss
---- OtherContainerFiles
---- index.js
-- redux
-- utils
---- validation.js
-- client.js
-- config.js
-- routes.js
-- server.js
我尝试通过两种方式导入 API Gateway SDK:
1)
import ApigClient from './ApigClient';
import apiGatewayClient from './lib/apiGatewayCore/apiGatewayClient'
import sigV4ClientConfig from './lib/apiGatewayCore/sigV4ClientConfig'
import simpleHttpClientConfig from './lib/apiGatewayCore/simpleHttpClientConfig'
import utils from './lib/apiGatewayCore/utils'
import enc-base64 from './lib/CryptoJS/component/enc-base64'
import hmac from './lib/CryptoJS/component/hmac'
import hmac-sha256 from './lib/CryptoJS/rollups/hmac-sha256'
import sha256 from './lib/CryptoJS/rollups/sha256'
import axios from './lib/axios/dist/axios.standalone'
import url-template from './lib/url-template/url-template'
2)
class ApigValidation extends Component {
render() {
return (
<div>
<h1>Hello</h1>
<script type="text/javascript" src="./lib/axios/dist/axios.standalone.js"></script>
<script type="text/javascript" src="./lib/CryptoJS/rollups/hmac-sha256.js"></script>
<script type="text/javascript" src="./lib/CryptoJS/rollups/sha256.js"></script>
<script type="text/javascript" src="./lib/CryptoJS/components/hmac.js"></script>
<script type="text/javascript" src="./lib/CryptoJS/components/enc-base64.js"></script>
<script type="text/javascript" src="./lib/url-template/url-template.js"></script>
<script type="text/javascript" src="./lib/apiGatewayCore/sigV4Client.js"></script>
<script type="text/javascript" src="./lib/apiGatewayCore/apiGatewayClient.js"></script>
<script type="text/javascript" src="./lib/apiGatewayCore/simpleHttpClient.js"></script>
<script type="text/javascript" src="./lib/apiGatewayCore/utils.js"></script>
<script type="text/javascript" src="apigClient.js"></script>
<script type="text/javascript">
var apigClient = apigCleint.newClient({
apiKey: 'This-is-my-api-key'
});
apigClient.myFuncGet(params, null)
.then(function(response) {
console.log(JSON.stringify(response));
}).catch(function(resuponse) {
console.log(JSON.stringify(response));
});
</script>
</div>
);
}
}
1) 文件夹结构是否正确?我应该将 SDK 放在 Utils 中吗?
2)如何在react中导入/加载/添加JS SDK并启用get/post功能?
敬请指教,不胜感激!
最佳答案
React 不会对您如何进行 http/异步数据获取或如何构建项目做出任何决定。因此,就“正确”的方式而言,有很多。看Redux用于 Flux 的流行且众所周知的实现/变体。
一般来说,您可以执行以下两种操作之一来将 SDK 或任何类型的外部代码添加到您的 React 应用程序中。
使用 bundler :Webpack、rollup.js、browserify 或其他工具将以这样的方式输出代码,以便您可以从需要它的模块访问您需要的 SDK。
将其包含在脚本标记中:如果您在浏览器中运行所有内容,并且出于某种原因不想捆绑所有内容,则需要将该文件包含在 HTML 中在 React 之前,这样您就可以访问从 SDK 公开的全局模块。
例如:
<script src="copy_of_sdk_from_CDN"></script>
<script src="copy_of_react_from_CDN"></script>
<script src="other_app_code"></script>
<script src="other_app_code"></script>
仅当您不使用 webpack 或其他 bundler 时,您才需要执行此操作。这些 bundler 应该为您提供一个文件,其中包含按照您使用 require
或 import
指定的依赖项按正确顺序排列的所有内容(如果您使用的是 ES6 模块)
这些几乎是将 SDK“引入”项目的唯一方法。您几乎可以从远程位置拉取它或下载它并以这种方式使用它(la npm)。
关于javascript - 如何将API Gateway SDK添加到React中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36211539/