从ReactJS组件调用服务器端函数

我试图在我的ReactJS应用程序中实现一个支付系统，该应用程序需要服务器端代码。

我有几个问题：

• 你如何连接ReactJS应用程序，以便它可以与服务器端代码进行通信？
• 你将如何在服务器端代码中设置一个函数？
• 你将如何从ReactJS应用中的组件调用该function？

作为参考，我试图整合条纹订阅 。 他们提供Node，PHP等的服务器端代码示例。

仅供参考：我不想设置服务器端渲染。 当您参考ReactJSsearch服务器端代码时，这就是所有的问题。

编辑：我特别感兴趣的NodeJS解决scheme。 我也使用Webpack。

Answer 1

以防万一，这对你有帮助…我有一个React用户界面，在Django后端触发video处理（我主要通过Apollo客户端使用GraphQL触发我的服务器端函数和REST框架，当涉及文件传输）。 REST是你的select吗？

我用于文件传输的中间件例如：

const SERVER_URL = process.env.SERVER_URL; const fileTransferApi = (payload) => { const { authenticated, token, endpoint, body, contentType, method } = payload; let config = {}; if (authenticated) { if (token) { config = { method, headers: { 'Content-Type': contentType, Authorization: `Bearer ${token}` }, body }; } else { throw new Error('No token saved!'); } } return fetch(`${SERVER_URL}/api/rest/v1/${endpoint}`, config) .then((response) => response.text().then((text) => ({ text, response })) ).then(({ text, response }) => { if (!response.ok) { return Promise.reject(text); } return text; }).catch((err) => console.log(err)); }; export const FILE_TRANSFER_API = Symbol('FILE_TRANSFER_API'); export default () => (next) => (action) => { const fileTransferApiAction = action[FILE_TRANSFER_API]; if (typeof fileTransferApiAction === 'undefined') { return next(action); } const { payload, types } = fileTransferApiAction; const [, successType, errorType] = types; return fileTransferApi(payload).then( (response) => next({ type: successType, payload: { text: response, message: 'ok' } }), (error) => next({ type: errorType, payload: { error: error.message || 'There was an error.' } }) ); }; 

我的商店（我使用Redux）：

 import { createStore, compose, applyMiddleware } from 'redux'; import { routerMiddleware } from 'react-router-redux'; import ReduxThunk from 'redux-thunk'; import ApolloClientSingleton from '../network/apollo-client-singleton'; import fileTransferApi from '../middlewares/fileTransferApi'; import reducer from './reducers'; export default class Store { constructor(history, initialState = {}) { this.data = createStore( reducer, initialState, compose( applyMiddleware( fileTransferApi, ReduxThunk.withExtraArgument(ApolloClientSingleton), routerMiddleware(history), ApolloClientSingleton.middleware() ), typeof window === 'object' && typeof window.devToolsExtension !== 'undefined' ? window.devToolsExtension() : (f) => f ) ); } } 

在我的行动中：

 export const windowsDownload = (authenticated, token) => ({ [FILE_TRANSFER_API]: { types: [WINDOW_DOWNLOAD_REQUEST, WINDOW_DOWNLOAD_SUCCESS, WINDOW_DOWNLOAD_FAILURE], payload: { endpoint: 'file_transfer/download/windows', contentType: 'text/csv', method: 'get', body: null, authenticated, token } } }); 

这个REST设置使我能够将我的React UI中的请求（POSTvideo，GET csv …）发送到我的Django服务器。 你不能在你的应用程序和服务器之间设置一些REST调用吗？