从React组件调用节点模块 [英] Invoking a node module from react component

问题描述

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

How do I use Node Modules for example 'lwip' in React component ? This is for an electron application.

使用代码更新问题:

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

button.js

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

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){

        });

    });
}

推荐答案

Node模块需要从主要的Electron线程运行，而不是从运行React的渲染器线程运行.

The Node module needs to be run from the main Electron thread, not the renderer thread on which React runs.

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

You can run NPM modules in the renderer process, as if you were in the browser, but those modules cannot use the Node.js library since obviously there is no Node in the browser.

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

To communicate between the main (Node) and renderer (browser) threads you need to use IPC (inter process communication) a system which uses events to send data between threads.

这是Electron的IPC文档.

如果您需要线程之间的持续通信，则可以使用 electron-ipc-socket 库.

If you need constant communication between threads you can use the electron-ipc-socket library.

这篇关于从React组件调用节点模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！