标签: react-dom
React 18异步方式卸载root
我有一个罕见的用例，我需要在我的 React 组件中注册多个根，并在组件卸载时销毁它们。显然，我在渲染时卸载了根。root.unmount()我通过在 后立即调用来模拟这种情况root.render(...)。在以下示例中：https://codesandbox.io/s/eager-grothendieck-h49eoo? file=%2Fsrc%2FApp.tsx
这会导致以下警告：
Warning: Attempted to synchronously unmount a root while React was already rendering. React cannot finish unmounting the root until the current render has completed, which may lead to a race condition.
这个警告对我来说意味着有一种异步方法可以卸载根目录，但我无法找到如何卸载根目录的方法。包装root.unmount()在异步函数 ( const unmount = async () => root.unmount()) 中不起作用。有任何想法吗？我在这里得到完全错误的东西吗？
推荐指数
解决办法
查看次数
scrollIntoView使用React引用
我们正在尝试在用户关闭另一个组件时滚动到特定组件.
我们的示例与下面的示例非常类似,取自https://reactjs.org/docs/refs-and-the-dom.html#exposing-dom-refs-to-parent-components
function CustomComponents(props) {
const items = [1,2,3,4].map((x, i) => return (
<div ref={props.inputRef} key={i}>
x + hello
</div>
)
return (
<div>
{ items }
</div>
);
}
function Parent(props) {
return (
<div>
<CustomComponents inputRef={props.inputRef} />
</div>
);
}
class Grandparent extends React.Component {
render() {
return (
<Parent
inputRef={el => this.inputElement = el}
/>
);
}
}
我们正在提供大量的卡片,并希望能够通过调用滚动到特定的卡片 this.refs[elem].scrollIntoView()
但我们的问题是调用this.refs在所有级别返回一个空对象,因此我们无法附加到特定元素,然后在用户返回查看此组件时触发它.
想要一些人如何解决这个问题.
推荐指数
解决办法
查看次数
检测React/ReactDOM开发/生产构建
React开发构建的行为与生成构建不同,例如错误处理.
由于process.env.NODE_ENVReact包的使用方式,可以计算出哪个是从环境中使用但仅在模块化环境中使用的:
if (process.env.NODE_ENV === 'production') {
module.exports = require('./cjs/react.production.min.js');
} else {
module.exports = require('./cjs/react.development.js');
}
process.env可能不适用的情况是React全局用作UMD模块,window.React并且window.ReactDOM:
<script src="some-unknown-react-version.js"></script>
<script>
React // is it in production mode?
</script>
可能的用途是:
可以在模块化和全局环境中工作的组件(发布为UMD),并在生产中呈现不同的组件
浏览器扩展或用户脚本,从中检测构建/生产模式
React或ReactDOM对象
如何在不依赖环境的情况下在运行时准确检测React开发/生产构建？
我正在寻找可靠和干净的解决方案,如果可能的话,它将适用于React 15和React 16.
这不是类似问题的重复,因为现有的答案通过解决问题process.env.
推荐指数
解决办法
查看次数
为什么我需要在行为中包装 React/Enzyme 状态变化？
在我的简单 React/ReactDOM/Enzyme 单元测试中，我收到来自 ReactDOM 的警告，关于将任何突变包装到act(). 如果我的测试仍然通过，为什么我需要这样做？我有 50 个左右的 React 组件，它们都使用钩子、自定义钩子等。我从不换行act()，它们都通过了。
我可以禁用此警告吗？我不想无缘无故地添加额外的代码。
警告：
Warning: An update to MyComponent inside a test was not wrapped in act(...).
When testing, code that causes React state updates should be wrapped into act(...):
act(() => {
/* fire events that update state */
});
/* assert on the output */
This ensures that you're testing the behavior the user would see in the browser. Learn more at [redacted]
我的测试：
const App …推荐指数
解决办法
查看次数
'HTMLElement | 类型的参数 null' 不可分配给类型为 'Element' 的参数。类型 'null' 不可分配给类型 'Element'.ts(2345)
我有 index.html
<body>
<div id="portal"></div>
<div id="root"></div>
</body>
并希望使用低于单独的组件portal div比root div，
import React from 'react';
const portalDiv = document.getElementById('portal');
function Portal1(props) {
return ReactDOM.createPortal(
<div>
{props.children}
<div/>,
portalDiv); //here
}
export default Portal1;
但我收到此错误，类型为“HTMLElement |的参数” null' 不可分配给类型为 'Element' 的参数。类型 'null'在 VScode 中不能分配给类型 'Element'.ts(2345)。
我正在使用打字稿。请帮忙。
推荐指数
解决办法
查看次数
如何使用React.js用类包围每个X元素
我只想做点如下的事情:
<div class="container">
<div class="row">
<div class="col-md-4">content</div>
<div class="col-md-4">content</div>
<div class="col-md-4">content</div>
</div>
<div class="row">
<div class="col-md-4">content</div>
<div class="col-md-4">content</div>
<div class="col-md-4">content</div>
</div>
<!-- etc ... -->
</div>
例如,每3个.col-md-4's被包裹在一个.row
我试过了:
rows.push(<div className="row">);
for (var count = 0; count < 9; count++) {
rows.push( <!-- content --> );
// Add closing and reopening divs every 3 elements
if (count % 3 === 0) {
rows.push(</div><div className="row">);
}
}
rows.push(</div>);
}
遗憾的是,这不起作用.
此外,3和9只是这里的例子,我想知道是否有通用的方法.
推荐指数
解决办法
查看次数
我如何进行同步ReactDOM.render
对于我的应用程序,我需要渲染一些孩子,然后测量结果div.在伪代码中,它看起来像这样:
function getDims(child) {
var testEl = document.getElementById('test-el');
ReactDOM.render(child, testEl);
var dims = testEl.getBoundingClientRect();
ReactDOM.unmountComponentAtNode(testEl);
return dims;
}
不幸的是,根据文档ReactDOM.render可能在未来变得异步.是否有一个面向未来的选项来强制同步渲染,以便上述功能可以工作？
推荐指数
解决办法
查看次数
有条件地改变渲染 React 组件的顺序
我有三个组件<Header /> <Body /> <Footer />。我想根据以下条件更改显示顺序。
<div> <Header /> <Body /> <Footer /> </div>
或者
<div> <Body /> <Header /> <Footer /> </div>
或根据一些新条件进行一些不同的排序。
推荐指数
解决办法
查看次数
如何找到焦点 React 组件？（如 document.activeElement）
如果您有 500 个组件，每个组件都有一个ref，您将如何找到用户关注的组件？所有带有 的组件ref都是可聚焦的元素，例如<input />、<textarea />等。为简单起见，所有这些refs都可以从单个顶级组件访问。
如果您的 React 组件具有，这非常简单classNames- 但是如果您想找到refa 的document.activeElement，是否有某种方法可以实现这一目标而不必求助于 classNames？
为了说明为什么我们没有classNames，我们正在使用JSSvia emotion。为了className这个目的而必须手动分配所有东西是相当荒谬的。我没有想到明显的替代方案。
推荐指数
解决办法
查看次数
React js动态改变元标签
我的应用程序有两个流程，一个是用户端，另一个是管理端。我的用户端是响应式的，所以我想要元标记说，<meta name="viewport" content="width=device-width, initial-scale=1" />而我的管理端没有响应式，所以我想强制浏览器以桌面模式打开，这需要这个元标记是这样的<meta name="viewport" content="width=1024" />
我正在使用react-document-meta以下对象
const metaUser = {
title: "User meta tags",
description: "Basically make the application responsive when on user side",
meta: {
name: { keywords: "viewport" },
content: "width=device-width, initial-scale=1",
},
};
const metaAdmin = {
title: "Admin meta tags",
description: "Make the application default in desktop mode",
meta: {
name: { keywords: "viewport" },
content: "width=1024",
},
};
但它在 head 标签上创建了新的元，并且这些标签不起作用
推荐指数
解决办法
查看次数