获取节点变量以反应组件答案

【问题标题】：get node variable to react component获取节点变量以反应组件
【发布时间】：2020-06-13 12:10:03
【问题描述】：

我用https://github.com/electron-react-boilerplate/electron-react-boilerplate 启动一个电子应用程序

我使用来自节点的 child_process，例如：

function func() {
spawn('powershell.exe', ["ls"], (error, stdout, stderr) => { 
  if (error) {
    console.error(`exec error: ${error}`);
    return;
  }
  log = stdout ;
console.log(`stdout: ${stdout}`);
}
console.error(`stderr: ${stderr}`);
}
);  
}

我想将标准输出（或日志）放入一个反应组件（在同一个 js 文件中）

import React, { useState } from 'react';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
// node
var spawn  = require('child_process').execFile;

var log;

function func() {
spawn('powershell.exe', ["ls"], (error, stdout, stderr) => { 
  if (error) {
    console.error(`exec error: ${error}`);
    return;
  }
  log = stdout ;
console.log(`stdout: ${stdout}`);
}  
console.error(`stderr: ${stderr}`);
 }
);  
 }

function Minimal() {
const [ShowGithubDialog, setShowGithubDialog] = React.useState(null);
const [GitLocalRepo, setGitLocalRepo] = React.useState(null);
return (
<div>
<Button
  variant="contained"
    color="primary"
    // className={classes.button}
    onClick={() => {
      func();
    }}
  >
    Start
  </Button>
 <TextField
id="filled-multiline-static"
multiline
fullWidth
rows="15"
defaultValue="Welcome"
variant="outlined"
value={log}
inputProps={{
  readOnly: true
  }}
  />
  </div>
  );
 }

 export default Minimal;

当我单击按钮时，命令有效，我可以在控制台上看到结果，但 Textfield 不显示标准输出值（我也尝试使用日志）。我不明白，我错过了什么？

【问题讨论】：

首先，您忘记解释这两者是如何远程相关的。 React 代码通常在客户端上运行，所以除非你能解释你的组件是如何与 Node 通信的，否则这里显而易见的答案是“两者完全不相关”。这是你在捆绑前做的事情吗？如果是这样，请谈谈您的捆绑是如何工作的。至少，把它变成minimal reproducible example。
我更新添加了我启动脚本的方式。这是一个简单的按钮
这无济于事：您显示的代码并没有告诉我们这个实际上是如何运行的。浏览器中的 React 不需要 Node 服务器即可在任何地方运行，那么您的 minimal reproducible example 代码的其余部分在哪里？请认真对待这个请求：我们不知道您在做什么或您的代码是什么样的，也不知道您脑海中但不在帖子中的任何其他内容：更新您的帖子以显示它是如何运行的，以及所有内容这与剥离的这个特定问题无关，所以大概这意味着一个非常短的 Node.js 脚本，一个非常短的 React 应用程序，以及如何运行的描述。
我更新了完整的最小示例（我希望）

标签： node.js reactjs material-ui textfield child-process

【解决方案1】：

你不能这样做。

React 组件在客户端呈现。除非使用 API，否则它们与服务器的交互绝对为零。如果您想记录内容，只需使用console.log(...) 并观看浏览器控制台。

如果您必须登录服务器端，那么您需要设置一个 API 来接受来自客户端的请求，并将请求正文打印到服务器上运行的控制台。这可以使用 Express JS 来完成：

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors);
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.post('/log', (req, res) => {
    console.log("Received log request: ", req.body.message);
    res.status(200);
});

app.listen(3001, () => console.log("API running"));

然后在你的组件中：

function func() {
    fetch('http://localhost:3001', {
        method: 'POST',
        body: { message: 'This will be logged!' }
    });
}

未经测试但应该可以工作

【讨论】：

我必须安装 express 吗？ Electron 可以替代它吗？
我不需要快递。我可以从我的反应组件（按钮）启动我的节点功能（child_process）。我唯一需要的是将结果值放入另一个反应组件中。我想我必须创建一个自定义事件
我搜索了很多，发现 useRef 钩子。我会试试这个

【解决方案2】：

我使用 IPC 和 userRef（不受控制的组件）并按预期工作！

【讨论】：