嘿，我在我的 React 项目中使用 React 微前端和 webpack 模块联合。根据微前端结构更改文件夹结构后，处理模块的常见依赖关系面临一些困难。
出现以下错误：
ERROR in resolving fallback for shared module react
Module not found: Error: Can't resolve 'react' in '/Users/admin/Desktop/guru/project/microfrontend/modules/metronic/layout/components/subheader/components'
ERROR in resolving fallback for shared module react
Module not found: Error: Can't resolve 'react-router-dom' in '/Users/admin/Desktop/guru/project/microfrontend/modules/metronic/layout/components/subheader/components'
这里我分享一下我的代码结构
网页包：
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
require('dotenv').config({ path: '../.env' });
module.exports = {
// the output bundle won't be optimized for production but …reactjs react-dom micro-frontend webpack-5 webpack-module-federation
在我的应用程序中，我想确定当前的滚动位置，因此我一直使用它来执行此操作（来源： https: //www.codegrepper.com/code-examples/javascript/get+current+scroll+position+javascript）
window.pageYOffset || document.documentElement.scrollTop
问题：当我console.log这个时，当页面未定位且位于顶部时，它仅返回0。
问题：是否有其他方法来获取当前滚动位置？
我有一个单对象状态驱动的应用程序，它的状态分派/订阅逻辑要与 React 'flow' 分开（即没有像 React-Redux 绑定这样的助手）。
当状态改变时，我的应用程序会重新呈现。
以下两个实现之间有什么区别，或者任何反模式问题？（对不起，任何人不高兴我没有使用 JSX）
var myElementClass = React.createClass(
render : function() {
//make use of this.props.state...
}
);
var myAppContainerComponent = React.createElement(
myElementClass,
{state : dataStore.getState()}
);
dataStore.onChange(function(){
ReactDOM.render(myAppContainerComponent, someDOMContainer);
});
对...
var myElementClass = React.createClass(
componentDidMount : function() {
var self = this;
this.props.store.onChange(function(){
self.setState(self.props.store.getState());
});
},
render : function() {
//make use of this.state...
}
);
var myAppContainerComponent = React.createElement(
myElementClass,
{store : dataStore}
);
ReactDOM.render(myAppContainerComponent, someDOMContainer);
第一个强制从“外部”重新渲染应用程序范围，即使用 ReactDOM。第二个在容器应用程序中做同样的事情。
我已经做了一些性能测试，实际上并没有看到差异。我会在路上遇到问题吗？多次点击 ReactDOM.render() 是一个问题吗？
我知道有些人会评论说这两种方式都可能很昂贵，因为它们各自都重新渲染整个应用程序（这不是 …
我有以下代码：
const priceCalculator = ReactDOM.render(<PriceCalculator />, reactHolder);
我需要priceCalculator稍后在我的代码中使用，但 ESLint 抱怨我不应该使用ReactDOM.render(). 这时候，我发现，你可以传递第三个参数到ReactDOM.render()这是一个回调。太好了，我以为...
ReactDOM.render(<PriceCalculator />, reactHolder, function(priceCalculator) {
// do something with priceCalculator
});
但priceCalculator未定义。在调试器中，我暂停了异常并发现this当我在这个函数中时它被设置为我的 React 组件。所以我重写了...
ReactDOM.render(<PriceCalculator />, reactHolder, function() {
const priceCalculator = this;
// do something with priceCalculator
});
它仍然未定义。这是怎么回事？
我正在使用 Webpack 编译 es6 React 代码（使用 babel）。
我是react.js的新手,我试图让这段代码替换电子应用程序内的html文件中的一行,其中包含MainInterface变量中的任何内容.
这是我的Render.js文件
var React = require('react');
var ReactDOM = require('react-dom');
var $ = jQuery = require('jquery');
var bootstrap = require('bootstrap');
//var createReactClass = require('create-react-class');
var MainInterface = React.createClass({
render: function() {
return(
<h1>SUCCESSSSSSSSSSS</h1>
);
}//render
});//MainInterface
ReactDOM.render(
<MainInterface />,
document.getElementById('projects')
);//render
这是html文件(想要替换WPM ...加载)(我的实际文件中没有这里丢失的最后一个html标记)
> <!DOCTYPE html> <html lang ="en"> <head>
> <meta charset="utf-8">
> <meta name ="viewport" content="width=device-width, initial-scale=1.0">
> <meta http-equiv="X-UA-Compatible" content="ie=edge">
> <link rel="stylesheet" href="css/app.css">
> <title>Project Manager</title> </head> <body> <div claa="main">
> <div class="page" id="projectratings">
> <div …这是我的webpack设置
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const SOURCE_DIR = './src';
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
template: SOURCE_DIR + '/index.html',
filename: 'index.html',
inject: 'body'
});
module.exports = env => {
console.log(`Environment Configs: ${JSON.stringify(env) || 'Default'}`);
console.log(`
Available Configs:
--env.watch = true / false //for allow webpack to watch build
`)
let environment = env || {};
const {
watch,
analyze,
} = environment;
const configedAnalyzer = new BundleAnalyzerPlugin({
// Can be `server`, `static` or …javascript reactjs webpack react-dom webpack-bundle-analyzer
一些教程使用--save 模式，而一些使用--save-dev 模式。
两个都用 Babel，说是用来把 React 转成浏览器可以理解的纯 Javascript。这意味着最终的捆绑包将包含 Javascript。在这种情况下，为什么我们需要在 --save 模式下安装 react 和 react-dom ？--save-dev 模式应该足够了吧？
另外，像 import React from 'react' 这样的语句，它们会进入 prod 构建包文件吗？如果没有，如果 React 在相应的范围/内存空间中不可用，像 React.createClass 这样的语句如何工作？
我最近将项目从React v15.2.1升级到16.4.1，并且我的侧边栏组件抛出以下错误：
Error: Unable to find node on an unmounted component. bundle.js line 1326 > eval:42:15
invariant
webpack:///./node_modules/fbjs/lib/invariant.js?:42:15
findCurrentFiberUsingSlowPath
webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:3817:7
findCurrentHostFiber
webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:3886:23
findHostInstance
webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:16824:19
findDOMNode
webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:17310:12
handleClickOutside
webpack:///./src/components/simulator/sidebar/Sidebar.js?:99:31
handleClickOutside self-hosted:984:17
根据错误消息，我相信在handleClickOutside（event）方法中调用ReactDOM.findDOMNode（this）时会发生错误。
我正在使用的组件可以在以下位置找到：https : //ashiknesin.com/blog/build-custom-sidebar-component-react/，我对此进行了一些更改：
import React from 'react'
import ReactDOM from 'react-dom'
import classNames from 'classnames'
import SimulatorForm from './SimulatorForm'
import './Sidebar.scss'
const openForm = require('../../../public/icons/si-glyph-arrow-left.svg');
const closeForm = require('../../../public/icons/si-glyph-arrow-right.svg');
const pinForm = require('../../../public/icons/si-glyph-pin-location-love.svg');
const unpinForm = require('../../../public/icons/si-glyph-pin-location-delete.svg');
class Sidebar extends React.Component {
constructor(props) {
super(props)
this.state = …考虑以下示例：
class GridContainer extends React.Component {
...
render (){
return <div>
<Pagination portalId="portal-id"></>
<Grid ...>
</div>
}
}
class Grid extends React.Component {
...
render (){
return <div>
<div id="portal-id"></>
<table ...>
</div>
}
}
class Pagination extends React.Component {
...
render (){
return return ReactDOM.createPortal(<div>Paginator DOM...</div>, document.getElementById(this.props.portalId));
}
}在其他组件DOM中呈现门户是否安全？我已经对其进行了测试，但是它不可靠。该Portals文档提到您可以在DOM节点中呈现门户，但是与组件DOM无关。
为什么这有所不同（在这里推测）？在更新门户网站父级组件时，在对帐过程中，差异可能会发现不一致之处并删除门户网站节点。
从我的测试来看，上述情况没有发生，但我不知道我是否可以假设React可以处理。问：
将门户呈现到另一个组件DOM中是否安全？
我正在使用 React 创建一个 PWA（这意味着它应该理想地可以在移动设备和浏览器中使用）。我的抽屉（汉堡菜单）中有一个按钮，可以让查看器下载 CSV 文件。
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
// ...
<ListItem
button
onClick={handleExport}
className="drawer-export-contacts-button"
>
<ListItemIcon>
<ShareIcon />
</ListItemIcon>
<ListItemText primary={strings.exportContacts} />
</ListItem>
我有一个将 CSV 数据准备为 a 的函数，Blob但我不知道如何触发下载。
function handleExport() {
const csv = convertContactsToCSV(contacts);
const csvData = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
// ...
}
你怎么能让用户下载数据？
react-dom ×10
reactjs ×9
javascript ×6
webpack ×3
babeljs ×2
blob ×1
csv ×1
ecmascript-6 ×1
electron ×1
jsx ×1
package.json ×1
redux ×1
webpack-5 ×1
window ×1