react-dom 相关问题

用于处理DOM的React包。

我无法使用ReactJS Bootstrap更改容器的宽度、高度、边框、输入字段和按钮。但颜色和字体改变了

我喜欢使用reactjs创建注册页面，并且我可以使用react-bootstrap作为CSS。我可以添加元素的字体、样式和颜色。但我无法改变容器、按钮和我的大小...

javascript html reactjs react-bootstrap react-dom

回答 1 投票 0

本地主机显示空白页，在反应引导路由中没有任何错误，并且不链接到不同的页面

我使用 create-react-app 创建了我的应用程序并尝试在其上使用react-router。但它根本不起作用。这是我的 App.js 导入“bootstrap/dist/css/bootstrap.min.css”；导入'反应-

reactjs react-router react-dom

回答 1 投票 0

为什么我在导入@wordpress/element时会出现TypeError

与这个问题相同的问题。但现在我导入“@wordpress/element”而不是“react-dom/client”，因为我读到你也可以使用它，因为它构建在 React 之上。现在我得到了不同的...

javascript reactjs wordpress typeerror react-dom

回答 1 投票 0

获取滚动位置的正确方法

在我的应用程序中，我想确定当前的滚动位置，因此我一直使用它来执行此操作（来源：https://www.codegrepper.com/code-examples/javascript/get+current+scroll+位置+java...

javascript reactjs window react-dom

回答 3 投票 0

match.params.id 显示白色空白全屏

我目前正在使用 MERN 开发一个电子商务网站。在 ProductScreen 中，我尝试显示 Products.js 中列出的所有产品详细信息。在 ProductScreen.js 中添加 match.params.id 时，它显示...

reactjs react-dom

回答 2 投票 0

如何等到动画结束来测试点击回调？

我创建了一个反应组件，单击该组件时会执行动画，动画结束后会运行回调。我想使用 Jest 和 React 测试库来测试此功能。这是...

javascript reactjs jestjs react-testing-library react-dom

回答 1 投票 0

React for 循环返回赋值表达式左侧无效

我支持循环 HTMLCollection，目的是更新每个 p 标签的样式。我的问题是我在赋值表达式中得到无效的左侧，我不知道为什么。 var getp = 文档...

javascript css reactjs react-dom

回答 4 投票 0

用 Jest 模拟`react-dom/client`

我希望在 Create React 应用程序中模拟 React-dom。随着 API 的更改，导入语句现在看起来像从'react-dom/client'导入{createRoot}；以及代码的使用...

reactjs jestjs react-testing-library react-dom

回答 1 投票 0

无法从react-dom-client进行tree-shake createRoot（需要900kb的大尺寸）？

我正在使用 Vite 构建 ReactJS 前端。我一直在 Chrome 上的 DevConsole 的网络下得到这个结果：请注意，这是一个开发服务器，而不是构建，但仍然有反应-

javascript reactjs webpack vite react-dom

回答 1 投票 0

将 React Portal 渲染到另一个组件 DOM 中是否安全？

考虑以下示例： GridContainer 类扩展了 React.Component { ... 使成为（）{ 返回考虑以下示例： 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。为什么会有所不同（此处推测）？在更新门户父组件时，在协调过程中 diff 可能会发现不一致并删除门户节点。根据我的测试，上述情况不会发生，但我不知道是否可以假设反应可以处理它。那么问题来了：将门户渲染到另一个组件 DOM 中是否安全？安全吗？当然可以，但它可能不会按您期望的方式工作。首先，你可以将 dom 完全转储到 React 创建的 div 中。我遇到过一些 React 程序员，他们会质疑这一事实，但 React 设计期望并考虑在必要时直接编辑 dom。如果他们不这样做，就不会有 componentDidUpdate 或 React refs。有关与其他库集成的文档可能是最相关的。这是独家新闻： React 不会触及渲染的 div 的内部，假设它在渲染结束时始终为空。它只会：创建新元素，只要将其留空，这里就无关紧要了。更新最初由react创建的现有元素。删除最初由react创建的元素。所以只需创建那个空 div 并将其单独保留在 render 中，React 就不会弄乱它。这就是问题所在； React 不保证渲染的时间。这意味着您不知道在 Pagination 渲染时该元素是否真的存在，从而导致查询失败并且门户不显示。 componentDidUpdate 之所以有效，是因为 React 专门在 dom 更新后运行它。但是渲染是在 dom 更新之前运行的。因此，如果 Pagination 在与 Grid 相同的扫描中渲染，则 div 可能尚未安装。现在臭名昭著的堆栈溢出“Just-Don't-Do-That”答案：只是不要这样做。 Portal 的目的是让您在 React 容器之外进行渲染，同时将组件保留在 Reacts 渲染树内。如果你在 React 渲染树中渲染，为什么不直接在那里渲染组件呢？（如果这个说法令人困惑，我怪你） Portals 文档提到您可以在 DOM 节点中渲染门户，但没有提到组件 DOM 没有提及这一点，因为这是一般规则的特例；如果有更惯用的方式，则不应在 React 中直接访问 DOM。大量内存泄漏发生在 DOM 中。如果托管门户 (Grid) 的组件被重新渲染，而门户组件 (Pagination) 没有被重新渲染，这将导致 DOM 分离，即内存泄漏。在门户组件渲染时，附加门户的元素甚至可能不存在。我同意以下观点：createPortal不应该用于在另一个反应组件中渲染一个反应组件。但如果您需要，您可以使用 useState 和 useEffect 获得类似的结果： const {createContext, useContext, useState, useEffect} = React const PortalContext = createContext({ portalContent: null, setPortalContent: () => {} }) const PortalContextProvider = ({children}) => { const [portalContent, setPortalContent] = useState(null) return ( <PortalContext.Provider value={{portalContent, setPortalContent}}> {children} </PortalContext.Provider> ) } const usePortal = (renderContent, deps) => { const {setPortalContent} = useContext(PortalContext) useEffect(() => { setPortalContent(renderContent()) return () => { setPortalContent(null) } }, [setPortalContent, ...deps]) } const PortalSource = () => { usePortal(() => 'Hello there', []) return ( <div>Portal Source</div> ) } const PortalTarget = () => { const { portalContent } = useContext(PortalContext) return ( <div>Portal Target: {portalContent}</div> ) } const App = () => { return ( <PortalContextProvider> <h1>Demo</h1> <PortalSource /> <PortalTarget /> </PortalContextProvider> ) } ReactDOM.createRoot( document.getElementById('root') ).render(<App />) <script src="https://unpkg.com/react@18/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> <div id="root"></div>

javascript reactjs react-dom

回答 3 投票 0

vite npm run dev 错误无法读取文件“node_modules/react/jsx-dev-runtime.js”：访问被拒绝。'

我成功创建了一个vite应用程序。当我使用 npm run dev 运行应用程序时，出现以下三个错误： [错误] 无法读取文件“node_modules/react/jsx-dev-runtime.js”：访问被拒绝。 X [E...

javascript reactjs npm vite react-dom

回答 1 投票 0

使用 JS 制作自定义、不重复边框的最佳方法

我正在开发一个项目，我认为在帖子中添加自定义的、生成的、不重复的边框真的很酷，但我不确定执行此操作的最佳方法。我创建了一个...

javascript html css reactjs react-dom

回答 1 投票 0

dispatcher.useInsertionEffect不是一个函数（react 18.2和react-dom 18.2）

我正在尝试使用包react-pdf。 const 摘要表 = () => ( 测试我正在尝试使用包react-pdf。 const SummaryTable = () => ( <Document> <Page size="A4" style={styles.page}> <Typography> Test</Typography> </Page> </Document> ); return ( <> <PDFDownloadLink document={<SummaryTable />} fileName="somename.pdf"> {({ blob, url, loading, error }) => loading ? "Loading document..." : "Download now!" } </PDFDownloadLink> <SummaryTable /> </> ); 这是我的 package.json : "dependencies": { "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", "@mui/icons-material": "^5.11.16", "@mui/material": "^5.13.4", "@react-pdf/renderer": "^3.1.12", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "firebase": "^9.22.1", "papaparse": "^5.4.1", "react": "^18.2.0", "react-dom": "^18.2.0", "react-firebase-hooks": "^5.1.1", "react-router-dom": "^6.12.0", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" }, 当我尝试显示此页面时，我有 dispatcher.useInsertionEffect 不是函数之前SO线程中的解决方案不起作用，我已经在react和react-dom 18.2上。我有完全相同的问题，你找到解决方案了吗？

javascript reactjs react-dom react-pdf react-pdfrenderer

回答 1 投票 0

React Native 错误：无效的挂钩调用。钩子只能在函数组件体内调用

我正在和一些朋友一起编程一个国际象棋应用程序，现在我们在实现国际象棋本身时遇到错误。我们在函数的第一个 const 以及 App.jsx 的 Export 中收到错误我们的 GitHub

reactjs react-native react-hooks react-dom

回答 1 投票 0

链接到另一个页面，但在同一页面上获取输出（如下）REACT

App.js :- 函数应用程序（）{ 返回（ App.js :- function App() { return ( <div className="App"> <header className="App-header"> <div className="bg-slate-700 w-100 flex flex-col justify-center h-full"> <h1 className="font-bold text-white text-center justify-center "> User Authentication </h1> <form className="flex flex-col p-6 m-8 space-y-2 rounded-md bg-white "> <div className="text-cyan-500 text-center "> Have an account{" "} <Link to="/login" className="underline"> Sign In </Link> </div> </form> </div> </header> <Routes> <Route path="/login" element={<LoginPage />} /> </Routes> </div> ); } export default App; 登录页面.js import React from 'react' function LoginPage() { return ( <div>Login </div> ) } export default LoginPage App.js 是用户注册表单，在其下面有一个登录按钮（div）。单击“登录”，我会看到登录页面。但我在同一页面上 App.js 表单下方得到输出。 App.js 是用户注册表单，在其下面有一个登录按钮（div）。单击“登录”，我会看到登录页面。但我在同一页面上 App.js 表单下方得到输出。

reactjs react-router react-router-dom react-dom

回答 1 投票 0

react JS 中渲染“react-DOM”和“react-DOM/client”导入有什么区别？

我很好奇为什么react提供了两个导入库这两种方法我都试过了，但没发现有什么区别！

javascript reactjs import react-dom renderer

回答 2 投票 0

React DOM Router 与 CDN 抛出“无法读取未定义的属性（读取‘createBrowserHistory’）”

我正在尝试编写一个 HTML 页面，通过 CDN 加载 React 和其他相关 JavaScript 代码，并用它进行一些客户端路由（目标是拥有一个单文件迷你网站）。然而，当我

reactjs react-router react-router-dom react-dom unpkg

回答 1 投票 0

Reactjs 18 - 第三方 DOM 库集成 - ReactDOM.render？

我一直在使用 TomTomMap 开发地图应用程序，我需要在地图上渲染一个自定义标记组件，我可以在其中附加不同的 React 事件并更新 React 状态变量。在