Question

TL; DR：如何将jQuery代码（请参见下文）集成/实现到ReactJS中？

问候大家。这里是ReactJS和Flask的业余用户。考虑到生命周期中的实现与ReactJS有所不同，我只是在寻找一种如何将jQuery代码集成到ReactJS或什至其他替代方案的解决方案。

当前，此代码段（请参见下面的示例jQuery代码）与Flask的CRUD操作进行了很好的通信，该操作以FileReader()的形式以base64格式发送了来自#predict-button的所选图像，并在ML模式下响应了相应的预测<body> <input id="image-selector" type="file"> <button id="predict-button">Predict</button> <p style="font-weight:bold">Predictions</p> <p>foo1: <span id="foo1"></span></p> <p>foo2: <span id="foo2"></span></p> <p>foo3: <span id="foo3"></span></p> <img id="selected-image" src=""/> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script> let base64Image; $("#image-selector").change(function() { let reader = new FileReader(); reader.onload = function(e) { let dataURL = reader.result; $('#selected-image').attr("src",dataURL); base64Image = dataURL.replace("data:image/jpeg;base64,",""); } reader.readAsDataURL($("#image-selector")[0].files[0]); $("#foo1").text(""); $("#foo2").text(""); $("#foo3").text(""); }); $("#predict-button").click(function(event){ let message = { image: base64Image } console.log(message); $.post("http://127.0.0.1:5000/predict",JSON.stringify(message),function(response){ $("#foo1").text(response.prediction.foo1.toFixed(6)); $("#foo2").text(response.prediction.foo2.toFixed(6)); $("#foo3").text(response.prediction.foo3.toFixed(6)); console.log(response); }); }); </script> </body>被按下。

FileReader()

更不用说了，我不再需要captureShot()，因为我有ReactJS中'react-webcam'的此功能captureShot = () => { const screenshot = this.webcam.getScreenshot(); this.setState({ imageData: screenshot }); }，该函数返回当前网络摄像头图像的base64编码字符串。

ComponentDidMount()

出现这类问题：

这可以在ReactJS中实现吗？
如果是这样，怎么办？是通过render()还是在params = BaseHook.get_connection(self.ftp_conn_id) cnopts = pysftp.CnOpts() cnopts.hostkeys = None ftp = pysftp.Connection(host=params.host, username=params.login, password=params.password, port=params.port, cnopts=cnopts) #This will download file from FTP server to GCS location with ftp.open(self.ftp_folder + '/' + file_to_load, 'r+') as remote_file: blob = bucket.blob(self.gcs_prefix + file_to_load) blob.upload_from_file(remote_file) #This will upload file from GCS to FTP server with sftp.open(self.ftp_folder + '/' +file_name,'w+') as remote_file: blob = bucket.blob(fileObject['name']) blob.download_to_file(remote_file)内部？
如果不是，是否使用Express方式在通往Flask的途中在ReactJS中执行CRUD操作？

任何帮助将不胜感激。非常感谢您的时间和考虑。

Answer 1

对于SO来说，这个问题可能太宽泛了，但简短的回答是“可以”。让您以React的方式思考可能是我能为您提供答案而不为您建立答案的最好方法。

您的image-selector div将成为React组件。它将有一个onChange道具，它将指向一个自定义类方法，您可以在其中执行其余的业务逻辑。您的predict-button将类似地成为组件，这次以onClick作为道具。由于您正在运行所有功能以作为对操作的响应，因此，constructor或componentDidMount中不需要任何自举数据。

您也可以使用本机fetch或类似的库来替换您的$.post调用。最后，您将不需要任何jQuery代码，但是如果您逐段转换代码，那么您将到达那里并学到很多东西。我建议使用Create React App，以一种简单的方式进入体系结构。

Answer 2

我问这个奇怪问题的纯粹兴奋感使三位拒绝投票的人感到困惑。谢谢@jmargolisvt的友好建议，我已经做到了，我的Flask服务器现在终于可以与ReactJS很好地通信了-项目完成了！

这是解决方案，以防万一有人感兴趣。

export default class App extends Component { 
constructor(props){
    super(props);
    this.state = {
      bar: { foo1: null, foo2: null, foo3: null },
    }
  }

captureShot = () => {
    const screenshot = this.webcam.getScreenshot();
    let base64Image = screenshot.replace("data:image/jpeg;base64,","");
    this.setState({ 
      imageData: screenshot,
     });

    let message = {
      image: base64Image
    }

   fetch('http://127.0.0.1:5000/', {
    method: 'post',
    headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
        'Access-Control-Allow-Origin': '*'
    },
    body: JSON.stringify(message)
    })
  .then((response) => {
    console.log(response);
    return response.json();  
  })
  .then((data) => {
    this.setState( {
      bar: {
        foo1: (data.prediction.foo1.toFixed(3)),
        foo2: (data.prediction.foo2.toFixed(3)),
        foo3: (data.prediction.foo3.toFixed(3)),
      }
    })   
  })
   .catch(error => this.setState({ error,  bar: { foo1: null, foo2: null, foo3: null }, }));
  }
}

使用jQuery将Flask和ReactJS集成在一起

2 个答案: