小编典典

从React组件调用节点模块

reactjs

如何在React组件中使用节点模块(例如“ lwip”)?这是用于电子应用。

使用代码更新问题:

  1. 这是我试图从中调用另一个.js文件的react组件。

button.js

import React from 'react';
import ReactDOM from 'react-dom';
import resize from '../../node-code/process';

class Button extends React.Component{

    mess(){
        console.log('working');
        resize();
    }

    render(){
        return <button id="imgButton" onClick={this.mess.bind(this)}>Upload Image</button>
    }
}

export default Button
  1. 这是我试图调整图像大小的另一个JavaScript文件。

process.js

var lwip = require('lwip');

export default function(){
    var lwip = require('lwip');
    lwip.open('../../public/img/portrait.jpg', function(err, image){


    image.batch()
        .scale(0.75)          // scale to 75%
        .rotate(45, 'white')  // rotate 45degs clockwise (white fill)
        .crop(200, 200)       // crop a 200X200 square from center
        .blur(5)              // Gaussian blur with SD=5
        .writeFile('../../public/img/output.jpg', function(err){

        });

    });
}

阅读 290

收藏
2020-07-22

共1个答案

小编典典

Node模块需要从电子主线程运行,而不是从运行React的渲染器线程运行。

您可以像在浏览器中一样在渲染器进程中运行NPM模块,但是这些模块不能使用Node.js库,因为显然浏览器中没有Node。

要在主(节点)线程与渲染器(浏览器)线程之间进行通信,您需要使用IPC(进程间通信)系统,该系统使用事件在线程之间发送数据。

这是Electron的IPC文档。

如果需要线程之间的持续通信,可以使用electronic-ipc-
socket
库。

2020-07-22