标签:col bsp react link reload out ext exp path
React 与 electronjs 安装及运行请百度。
electronjs中引入 React
// electronjs 目录下的 main.js,loadFile修改为 loadURL // mainWindow.loadFile(‘index.html‘) mainWindow.loadURL("http://localhost:3000/");
// electronjs 目录下的 preload.js 最底下追加 // load Api 需要什么 api 就引入什么api const loadApi = [ ‘electron‘, // 引入 electron ‘mysql‘, // 引入 mysql ]; loadApi.map((item)=>{ global[item] = require(item); });
React中调用 preload.js文件中暴露的 api
import React,{Component} from ‘react‘; import { HashRouter as Router, Link, Route } from ‘react-router-dom‘; import ‘./App.css‘; import { Button } from ‘element-react‘; const Home = () => ( <div> <h2>Home</h2> </div> ) const About = () => ( <div> <h2>About</h2> </div> ) const Product = () => ( <div> <h2>Product</h2> </div> ) // const electron = window.electron class App extends Component { Test(){ } render(){ const { electron } = window.electron; // console.log(window.electron); return ( <Router> <div className="App"> <Link to="/">Home</Link> <Link to="/About">About</Link> <Link to="/Product">Product</Link> <hr/> <Route path="/" exact component={Home}></Route> <Route path="/about" component={About}></Route> <Route path="/product" component={Product}></Route> </div> </Router> ) } } export default App;
React + electronjs 实现桌面软件开发引入 electronjs 及 node api
标签:col bsp react link reload out ext exp path
原文地址:https://www.cnblogs.com/xiaqiuchu/p/12386282.html