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

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

我有几个问题：

• 如何连接ReactJS应用程序，使其能够与服务器端代码通信
• 如何在服务器端代码中设置函数
• 如何从ReactJS应用程序中的组件调用该函数

作为参考，我正在尝试整合。它们给出了Node、PHP等的服务器端代码示例

仅供参考：我没有尝试设置服务器端渲染。当您搜索参考ReactJS的服务器端代码时，所出现的几乎就是这些

---

编辑：我对NodeJS解决方案特别感兴趣。我也在使用Webpack。

以防万一，它对你有帮助。。。我有一个React UI，可以在Django后端触发视频处理（当涉及文件传输时，我主要通过Apollo客户端使用GraphQL来触发服务器端函数和REST框架）。

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

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）：

在我的行动中：

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向Django服务器发送请求（发布视频、获取csv…）你不能在你的应用程序和服务器之间设置一些REST调用吗？

我正在开发一个与你的答案类似的实现——我几乎还没有解决所有的问题，但我认为你的答案是正确的是安全的。REST解决方案似乎是一条可行之路。我一直缺少的是服务器部分。我只需要设置服务器，这样我就可以调用它，然后您的解决方案就可以正常工作了。谢谢

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
    }
  }
});