react 17.0的情况下使用http-proxy-middleware

在React 17.0中使用http-proxy-middleware需要进行以下步骤：

1. 首先安装axios和http-proxy-middleware：

npm i axios http-proxy-middleware -S

2. 在src目录下创建一个setupProxy.js文件，并在其中配置反向代理：

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5000', // 将请求代理到5000端口
      changeOrigin: true,
    })
  );
};

3. 在组件中使用axios发送请求：

import axios from 'axios';

axios.get('/api/data')
  .then(res => console.log(res.data))
  .catch(err => console.log(err));

注意：在React 17.0中，不需要手动降低React和React-dom的版本。

相关问题

react 中使用http-proxy-middleware

在React中使用http-proxy-middleware可以将请求转发给其他服务器，以下是使用http-proxy-middleware的步骤：

1.安装http-proxy-middleware

npm install --save-dev http-proxy-middleware

2.在src同级目录创建setupProxy.js文件，代码如下：

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function (app) {
  app.use(createProxyMiddleware('/api', {
    target: 'http://ip:8000/', // 将请求转发到的服务器地址
    pathRewrite: {
      '^/api': '', // 将请求中的/api替换为空
    },
    changeOrigin: true, // 是否跨域
    secure: false, // 是否验证证书
    ws: true, // 启用websocket
  }));
};

3.在React组件中使用转发后的请求，例如：

fetch('/api/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

react 使用react-viewer --save

react-viewer 是一个基于 React 的图片浏览器组件，可以在网页中实现图片的预览和放大缩小等功能。如果你想在自己的项目中使用 react-viewer，可以通过以下命令来安装：

npm install react-viewer --save

安装完成后，在需要使用的组件中引入即可，例如：

import ReactViewer from 'react-viewer';

<ReactViewer
  visible={this.state.visible}
  onClose={() => { this.setState({ visible: false }); }}
  images={[{ src: 'http://example.com/1.jpg', alt: '图片1' }, { src: 'http://example.com/2.jpg', alt: '图片2' }]}
/>

其中，`visible` 表示图片浏览器是否可见，`onClose` 是关闭图片浏览器的回调函数，`images` 是需要浏览的图片数组。具体的参数和用法可以查看 react-viewer 的文档。