dom-element 相关问题

React中react-router-dom最新版本如何实现延迟加载

我想使用Typescript在React中实现延迟加载。我收到打字稿错误。常量应用程序 = () => { 返回（我想使用 Typescript 在 React 中实现延迟加载。我收到打字稿错误。 const App = () => { return ( <RouterProvider router={createBrowserRouter( createRoutesFromElements( <Route> <Route path="/" element={<Outlet/>}> <Route index element={<Home />} /> <Route path="contact" element={<Contact />} /> <Route path="about" element={<About />} /> <Route path="*" element={<Navigate to="/" replace />} /> </Route> </Route> ) )} /> ) }; export default App; 下面的代码不起作用 <Route> <Route path="/" element={<Outlet/>}> <Route index lazy={() => import("./Home")} /> <Route path="contact" lazy={() => import("./Contact")} /> <Route path="about" lazy={() => import("./About")} /> <Route path="*" element={<Navigate to="/" replace />} /> </Route> </Route> const Home= lazy(() => import("./screens/home")); const About= lazy(() => import("./screens/about")); <Route> <Route path="/" element={<Outlet/>}> <Route index element={<Suspense fallback={<div>Loading...</div>}> <Home/> </Suspense> /> } /> <Route path="about" element={<Suspense fallback={<div>Loading...</div>}> <About/> </Suspense> /> } /> <Route path="*" element={<Navigate to="/" replace />} /> </Route> </Route>

MazPhoneNumberInput Vue.js 上的自动对焦

我在表单中使用 MazPhoneNumberInput 组件（https://maz-ui.com/components/maz-phone-number-input）：我正在以这种方式使用 MazPhoneNumberInput 组件（https://maz-ui.com/components/maz-phone-number-input）： <MazPhoneNumberInput v-model="phoneNumber" v-model:country-code="countryCode" show-code-on-list :preferred-countries="['DE', 'US', 'GB']" noFlags /> 并且想在手机输入上设置自动对焦。 MazPhoneNumberInput 组件本身没有 autofocus 属性，但它基于具有 autofocus 属性的 MazInput 组件（https://maz-ui.com/components/maz-input）：我尝试通过 javascript 使用 onMounted 方法设置焦点： import AppLayout from "@/Layouts/Auth/AppLayout.vue"; import MazPhoneNumberInput from 'maz-ui/components/MazPhoneNumberInput' import {ref, onMounted} from 'vue' const phoneNumber = ref() const countryCode = ref('DE') const focusInput = () => { phoneNumber.value.focus(); }; onMounted(focusInput); 但是没有成功。如何在手机输入上设置自动对焦？这可以使用 template ref 来完成，它可以访问组件的 DOM 元素。由于根元素只是多个其他元素的包装，因此需要额外的查询来获取实际的电话输入，然后您可以将其聚焦： onMounted(async () => { const phoneEl = phone.value.$el // MazPhoneNumberInput root DOM element const phoneInput = phoneEl.querySelector('input[type=tel]') // inner input DOM element await nextTick() // can focus after next DOM update phoneInput.focus() })

如何以 Svelte 方式设置导出和开槽零件的样式？

Svelte slot 的功能是否像 vanilla-js/dom 一样（我似乎无法让它工作）。在 html/js 中我可以这样做：身体{颜色：红色;} /* 从外部设置暴露部分的样式 */ ...</desc> <question vote="0"> <p>Svelte <pre><code>slot</code></pre>的功能是否像 vanilla-js/dom 一样（我似乎无法让它工作）。</p> <p>在 html/js 中我可以做：</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><style> body {color: red;} /* style exposed part from outside */ my-element::part(header) {color: green;} </style> <h1>Hello World</h1> <my-element> <div slot="header"><strong>Header</strong></div> <div slot="body">Body</div> </my-element> <script> customElements.define('my-element', class extends HTMLElement { constructor() { super(); const shadowRoot = this.attachShadow({mode: 'open'}); shadowRoot.innerHTML = ` <style> .container { border: solid 1px blue; padding: 5px; position: relative; &:after { content: "my-element"; display: block; position: absolute; bottom: -.5em; right: 5px; border: inherit; background-color: white; padding: inherit; } } /* style inserted/slotted part from inside */ [part="body"] ::slotted(div) { background-color: lightyellow; } </style> <div class="container"> <header part="header"><slot name="header"></slot></header> <hr> <div part="body"><slot name="body"></slot></div> </div> `; } }); </script></code></pre> </div> </div> <p></p> <p>其中 <pre><code>h1</code></pre> 的全局样式为红色，标有 <pre><code>part="header"</code></pre> 的元素从外部设置为绿色，插入 <pre><code>slot="body"</code></pre> 的内容从内部（shadow dom）设置为绿色有浅黄色背景。</p> <p>我不知道如何在 svelte 中执行任何这种（受控）跨界样式？（例如，当使用 <pre><code>AppShell::part(content)</code></pre> 时，我收到错误：</p> <pre><code>[plugin:vite-plugin-svelte] C:/srv/svelte/yoda5/src/routes/+layout.svelte:23:18 Expected a valid CSS identifier C:/srv/svelte/yoda5/src/routes/+layout.svelte:23:18 21 | 22 | <style> 23 | AppShell::part(content) { | ^ </code></pre> </question> <answer tick="false" vote="0"> <p>这里有关于<a href="https://learn.svelte.dev/tutorial/slots" rel="nofollow noreferrer">老虎机的课程</a>。最好参考该工具的文档。 Svelte 的学习网站非常棒。</p> <pre><code>// Slotted component, say Test.svelte. <div class="private-parent"> <slot /> </div> <style> div.private-parent { color: blue; } </style> </code></pre> <p>然后，您使用该组件：</p> <pre><code><script> import Test from './Test.svelte'; </script> <Test>  <p class="outside-style">Hello!</p> </Test> <style> p.outside-style { color: darkred; } </style> </code></pre> </answer> </body></html>

如何停止渲染 app.js 中的组件

}> } /> <SideBar /> <Routes> <Route path='/' element={<Body />}> <Route path='/' element={<Home />} /> <Route path='setting' element={<Setting />} /> </Route> <Route path='/service' element={<ServiceLayout />}> <Route path='/service' element={<Service />} /> </Route> </Routes> <Article /> </div> 我不想在服务组件中渲染文章组件。我怎么做？请帮助我。 Article组件无条件在路由内容下渲染。 <div className='App'> <SideBar /> <Routes> <Route element={<Body />}> <Route path='/' element={<Home />} /> <Route path='setting' element={<Setting />} /> </Route> <Route path='/service' element={<ServiceLayout />}> <Route index element={<Service />} /> </Route> </Routes> <Article /> // <-- always rendered! </div> 简单的解决方案就是从 JSX 中删除 Article： <div className='App'> <SideBar /> <Routes> <Route element={<Body />}> <Route path='/' element={<Home />} /> <Route path='setting' element={<Setting />} /> </Route> <Route path='/service' element={<ServiceLayout />}> <Route index element={<Service />} /> </Route> </Routes> {/* <Article /> removed */} </div> 但这可能不是您真正想要的。另一种选择是有条件地在路线上渲染它。示例： <div className='App'> <SideBar /> <Routes> <Route element={<Body />}> <Route path='/' element={<Home />} /> <Route path='setting' element={<Setting />} /> </Route> <Route path='service' element={<ServiceLayout />}> <Route index element={<Service />} /> </Route> </Routes> <Route path='article' element={<Article /> } /> // <-- only on "/article" path </div>

当element在element上使用迭代变量时如何重构ngFor？

我有这个 {{ dt }} 我想重构为 Angular v17

Dom 内容未在 Chrome 扩展清单版本 3 中加载

我正在尝试在清单版本 3 中创建 Chrome 扩展，我想从 Chrome 扩展中的 Dom 中抓取数据。当我加载 chrome 扩展 Dom 时未加载，因此无法爬行，af...

如何在Ractive.js中绑定变量window['array[element]']？

需要对具有“array[element]”这样非典型名称的变量进行双向绑定。下面的语法有效，但是当我将 0 更改为 @index 时，它就会被破坏。添加反斜杠是...

React Router v6 使用参数导航

目前，我在实现React Router v6（使用6.3.0）时遇到问题假设我有如下所示的路由 const ParticipantRoutes = () => ( 目前，我在实现React Router v6（使用6.3.0）时遇到问题假设我有如下所示的路由 const ParticipantRoutes = () => ( <ErrorBoundaryRoutes> <Route index element={<Participant />} /> <Route path="new" element={<ParticipantUpdate />} /> <Route path=":id"> <Route index element={<ParticipantDetail />} /> <Route path=":id"> <Route path="edit-invoice" element={<InvoiceUpdate />}/> </Route> <Route path="invoice" element={<ParticipantInvoiceUpdate />} /> <Route path="edit" element={<ParticipantUpdate />} /> <Route path="delete" element={<ParticipantDeleteDialog />} /> </Route> </ErrorBoundaryRoutes> ); 还有另一条路线，比如 const InvoiceRoutes = () => ( <ErrorBoundaryRoutes> <Route index element={<Invoice />} /> <Route path=":id"> <Route index element={<InvoiceDetail />} /> <Route path="delete" element={<InvoiceDeleteDialog />} /> <Route path="payment" element={<InvoicePaidDialog />} /> </Route> </ErrorBoundaryRoutes> ); 当我访问 URL 上定义的 ParticipantInvoiceUpdate 时，问题就出现了，比如 .../participant/*some-guid-participant*/*some-guid-participant-invoice*/edit-invoice 此页面具有向某些服务提交一些数据的行为，当接受服务器的响应时，我使用导航功能导航回 ParticipantDetail 元素。 navigate('/participant/${*some-guid-participant*}'); 但它不起作用，我尝试了一些东西，但似乎它只能导航到没有给出任何参数的元素。类似的东西 navigate('/participant'); 或 navigate('/invoice); 我也尝试过使用 generatePath 功能并将其与导航结合起来，但仍然没有成功 navigate(generatePath('/participant/:id',{id: participantId}), {replace:true}); 请帮助了解我是否遗漏了什么或误解了这个概念。根据您的代码，路线：.../participant/*some-guid-participant*/*some-guid-participant-invoice*/edit-invoice 指组件 InvoiceUpdate 而不是 ParticipantInvoiceUpdate 此外，使用字符串格式时不要忘记将 ' 更改为 ` : navigate(`/participant/${some-guid-participant}`);

如何防止点击时嵌套 React 组件中的事件冒泡？

这是一个基本组件。和都有 onClick 函数。我只想触发上的 onClick，而不是。我怎样才能实现这个目标？我玩过这是一个基本组件。 <ul> 和 <li> 都有 onClick 函数。我只想触发 <li> 上的 onClick，而不是 <ul>。我怎样才能实现这个目标？我尝试过 e.preventDefault()、e.stopPropagation()，但无济于事。 class List extends React.Component { constructor(props) { super(props); } handleClick() { // do something } render() { return ( <ul onClick={(e) => { console.log('parent'); this.handleClick(); }} > <li onClick={(e) => { console.log('child'); // prevent default? prevent propagation? this.handleClick(); }} > </li> </ul> ) } } // => parent // => child 我也有同样的问题。我发现 stopPropagation did 有效。我会将列表项拆分为一个单独的组件，如下所示： class List extends React.Component { handleClick = e => { // do something } render() { return ( <ul onClick={this.handleClick}> <ListItem onClick={this.handleClick}>Item</ListItem> </ul> ) } } class ListItem extends React.Component { handleClick = e => { e.stopPropagation(); // <------ Here is the magic this.props.onClick(); } render() { return ( <li onClick={this.handleClick}> {this.props.children} </li> ) } } React 使用事件委托和文档上的单个事件侦听器来处理冒泡事件，例如本例中的“单击”，这意味着不可能停止传播；当您在 React 中与真实事件交互时，真实事件已经传播。 React 的合成事件上的 stopPropagation 是可能的，因为 React 在内部处理合成事件的传播。 stopPropagation: function(e){ e.stopPropagation(); e.nativeEvent.stopImmediatePropagation(); } 关于 DOM 事件的顺序：CAPTURING vs BUBBLING 事件传播有两个阶段。这些被称为 “捕获” 和 “冒泡”。 | | / \ ---------------| |----------------- ---------------| |----------------- | element1 | | | | element1 | | | | -----------| |----------- | | -----------| |----------- | | |element2 \ / | | | |element2 | | | | | ------------------------- | | ------------------------- | | Event CAPTURING | | Event BUBBLING | ----------------------------------- ----------------------------------- 首先发生捕获阶段，然后是冒泡阶段。当您使用常规 DOM api 注册事件时，默认情况下事件将成为冒泡阶段的一部分，但这可以在事件创建时指定 // CAPTURING event button.addEventListener('click', handleClick, true) // BUBBLING events button.addEventListener('click', handleClick, false) button.addEventListener('click', handleClick) 在React中，冒泡事件也是你默认使用的。 // handleClick is a BUBBLING (synthetic) event <button onClick={handleClick}></button> // handleClick is a CAPTURING (synthetic) event <button onClickCapture={handleClick}></button> 让我们看一下handleClick回调（React）： function handleClick(e) { // This will prevent any synthetic events from firing after this one e.stopPropagation() } function handleClick(e) { // This will set e.defaultPrevented to true // (for all synthetic events firing after this one) e.preventDefault() } 我在这里没有看到提到的替代方案如果您在所有事件中调用 e.preventDefault()，您可以检查事件是否已被处理，并防止再次处理它： handleEvent(e) { if (e.defaultPrevented) return // Exits here if event has been handled e.preventDefault() // Perform whatever you need to here. } 关于合成事件和原生事件的区别，请参阅React文档：https://reactjs.org/docs/events.html 这是防止单击事件前进到下一个组件然后调用 yourFunction 的简单方法。 <Button onClick={(e)=> {e.stopPropagation(); yourFunction(someParam)}}>Delete</Button> 这不是 100% 理想，但如果在儿童中传递 props 太痛苦 -> 儿童时尚或为此目的创建 Context.Provider/Context.Consumer just），你正在处理另一个库，它有自己的处理程序，它在您的处理程序之前运行，您也可以尝试： function myHandler(e) { e.persist(); e.nativeEvent.stopImmediatePropagation(); e.stopPropagation(); } 据我了解，event.persist方法可以防止对象立即被扔回React的SyntheticEvent池中。因此，当你伸手去拿 React 中传递的 event 时，它实际上并不存在！这种情况发生在孙子中，因为 React 在内部处理事情的方式是首先检查父进程是否有 SyntheticEvent 处理程序（特别是如果父进程有回调）。只要您不调用 persist 来创建大量内存以继续创建诸如 onMouseMove 之类的事件（并且您没有创建某种 Cookie Clicker 游戏，例如 Grandma's Cookies），就应该完全没问题！另请注意：偶尔阅读他们的 GitHub，我们应该密切关注 React 的未来版本，因为他们可能最终会解决一些问题，因为他们似乎打算在编译器中折叠 React 代码/转译器。如果您希望发生嵌套元素中的操作而不是父元素中的操作，那么，您可以从父元素的操作处理程序中检查目标的类型，然后基于该类型执行操作，即，如果目标是我们的嵌套元素，我们什么也不做。否则两个处理程序都会被调用。 // Handler of the parent element. Let's assume the nested element is a checkbox function handleSingleSelection(e) { if(e.target.type !== 'checkbox') { // We do not do anything from the // parent handler if the target is a checkbox ( our nested element) // Note that the target will always be the nested element dispatch(lineSelectionSingle({ line })) } } 我在 event.stopPropagation() 工作时遇到问题。如果您也这样做，请尝试将其移动到单击处理程序函数的顶部，这就是我需要做的来阻止事件冒泡。示例函数： toggleFilter(e) { e.stopPropagation(); // If moved to the end of the function, will not work let target = e.target; let i = 10; // Sanity breaker while(true) { if (--i === 0) { return; } if (target.classList.contains("filter")) { target.classList.toggle("active"); break; } target = target.parentNode; } } 您可以通过检查事件目标来避免事件冒泡。例如，如果您将输入嵌套到 div 元素，其中有单击事件的处理程序，并且您不想处理它，则单击输入时，您可以将 event.target 传递到您的处理程序中，并检查处理程序应该是根据目标的属性执行。例如，您可以检查 if (target.localName === "input") { return}。所以，这是一种“避免”处理程序执行的方法解决此问题的另一种方法可能是在子级上设置 onMouseEnter 和 onMouseLeave 事件。（您的 < li > 标签）每当鼠标悬停在子级上时，您都可以设置一个特定的状态，以阻止父级执行 onClick 函数内容。比如： class List extends React.Component { constructor(props) { super(props) this.state.overLi = false } handleClick() { // do something } render() { return ( <ul onClick={(e) => { if (!this.state.overLi) { console.log("parent") this.handleClick() } }} > <li onClick={(e) => { console.log("child") // prevent default? prevent propagation? this.handleClick() }} onMouseEnter={() => this.setState({ overLi: true, }) } onMouseLeave={() => this.setState({ overLi: false, })} ></li> </ul> ) } } 我进行了很多搜索，但没有设法使用 e.stopPropagation() 为我的上下文实现任何解决方案您可以验证点击的元素是否是预期的元素。例如： class List extends React.Component { constructor(props) { super(props); } handleClick(e) { if(e.target.className==='class-name'){ // do something } } render() { return ( <ul {/* Replace this with handleClick */} onClick={(e) => { console.log('parent'); this.handleClick(); }} <li onClick={(e) => { console.log('child'); // prevent default? prevent propagation? this.handleClick(); }} </li> </ul> ) } } 执行此操作的新方法更加简单，并且会节省您一些时间！只需将事件传递到原始点击处理程序并调用 preventDefault();。 clickHandler(e){ e.preventDefault(); //Your functionality here }

Javascript 函数 openFullscreen() ，如何让它在页面上的多个 iframe 上工作

在页面上我有一个 iframe，src 中有 *.pdf 文件。 <p>在页面上我有一个 iframe，src 中有 *.pdf 文件。</p> <pre><code><div class="node--view-mode-full"> <p><iframe allow="fullscreen" allowfullscreen="" frameborder="0" height="980" scrolling="no" src="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf" width="660"></iframe></p> <p><iframe allow="fullscreen" allowfullscreen="" frameborder="0" height="980" scrolling="no" src="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf" width="660"></iframe></p> </div> </code></pre> <p>浏览器中内置的 pdf 查看器现在不支持 iframe 中的全屏模式。</p> <p>我找到了解决方案<a href="https://www.w3schools.com/howto/howto_js_fullscreen.asp" rel="nofollow noreferrer">https://www.w3schools.com/howto/howto_js_fullscreen.asp</a>，解决了问题 - 以全屏模式打开 iframe。在 w3schools 的示例中，打开 iframe 的按钮已存在于 HTML <a href="https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_fullscreen" rel="nofollow noreferrer">https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_fullscreen</a>.</p> <p>在我的解决方案中，我通过 javascript 添加按钮，因为带有 iframe 的页面已经存在，但没有此类按钮：</p> <pre><code>jQuery(document).ready(function($){ $(".node--view-mode-full iframe[src*='.pdf']").each(function (index) { $(this).addClass('fullscreenframe'); $(this).attr('id', 'fullscreen-'+index); $('<button onclick="openFullscreen()">Open in Fullscreen Mode</button>&nbsp;<strong>Tip:</strong> Press the "Esc" key to exit full screen.<br>').insertBefore(this); }); }); </code></pre> <p>然后添加一个全屏打开 iframe 的功能（与 w3schools 相同）：</p> <pre><code>function openFullscreen() { var elem = document.getElementsByClassName("fullscreenframe")[0]; if (elem.requestFullscreen) { elem.requestFullscreen(); } else if (elem.webkitRequestFullscreen) { /* Safari */ elem.webkitRequestFullscreen(); } else if (elem.msRequestFullscreen) { /* IE11 */ elem.msRequestFullscreen(); } }; </code></pre> <p>当页面上只有一个带有 *.pdf 的 iframe 时，Everysing 工作正常。但是，当我在页面上有两个或多个 iframe，并且单击任何 iframe 附近的“以全屏模式打开”任何按钮时，我总是在全屏模式下只看到第一个 *.pdf...</p> <p>我知道，这是因为我只得到 elem = document.getElementsByClassName("fullscreenframe")[0]; 中的第一个 iframe;</p> <p>我知道我需要使用类似的每个或类似的东西，但我无法解决它。在搜索关于页面上一个全屏元素的所有解决方案时，没有关于页面上多个元素的解决方案...谢谢。</p> </question> <answer tick="true" vote="0"> <p>也许是这样的：</p> <pre><code>jQuery(document).ready(function($){ $(".node--view-mode-full iframe[src*='.pdf']").each(function (index) { $(this).addClass('fullscreenframe'); $(this).attr('id', 'fullscreen-'+index); $('<button onclick="openFullscreen(' + index + ')">Open in Fullscreen Mode</button>&nbsp;<strong>Tip:</strong> Press the "Esc" key to exit full screen.<br>').insertBefore(this); }); }); function openFullscreen(index) { var elem = document.getElementsByClassName("fullscreenframe")[index]; if (elem.requestFullscreen) { elem.requestFullscreen(); } else if (elem.webkitRequestFullscreen) { /* Safari */ elem.webkitRequestFullscreen(); } else if (elem.msRequestFullscreen) { /* IE11 */ elem.msRequestFullscreen(); } } </code></pre> </answer> <answer tick="false" vote="0"> <p>为什么不整合 jQuery？</p> <pre><code>const fullScreen = element => element.requestFullScreen(); // all modern browsers $(function(){ $(".node--view-mode-full iframe[src*='.pdf']").each(function (index) { $(this).addClass('fullscreenframe'); $(this).attr('id', 'fullscreen-'+index); $('<button class="fullScreen">Open in Fullscreen Mode</button>&nbsp;<strong>Tip:</strong> Press the "Esc" key to exit full screen.<br>').insertBefore(this); }); $(".fullScreen").on("click", function() { const $iFrame = $(this).closest('p').find('iframe.fullscreenframe'); if ($iFrame) fullScreen($iFrame.get(0)); // pass the DOM element }); }); </code></pre> </answer> </body></html>

当 dom 显示全套卡片或仅显示所选卡片时，如何处理新选择的卡片的转换？

将嵌套元素放入 ng-content

我尝试用一个获得所有。一个直接位于父元素的根 DOM 中，另一个位于内部帕...

如何将 swiper 11.0.5 元素与 Angular 17 一起使用

在 Angular 17 中，一切都是独立组件，并且没有 app.module.ts 文件。那么，我们把这段代码放在哪里，从“swiper/element”导入{register}；登记（）; 我正在...

Typescript、React、强类型 useHistory

我将 useHistory (react-router-dom) 变量作为参数发送到employee.service，其中我使用带有状态和路径名的“history.push”方法。不幸的是我不能...

为什么我导入 React 时服务器返回 MIME 类型为“text/html”？

这是我的js：从'./node_modules/react'导入React；从'./node_modules/react-dom'导入ReactDOM；让 thePage = React.createElement( '主要的'，无效的， '哈哈' ）； ReactDOM.render(thePage,

在React.js中使用renderToString使用express启用服务器端渲染时出错

这是我的服务器/server.js：从“快递”进口快递；从“反应”导入反应；从 'react-dom/server' 导入 ReactDOMServer, { renderToString }; 从 '.....

我们无法从指定元素检索数据 - stripe Reactjs

我在我的reactjs应用程序中面对这个问题，我已经将我的整个包裹在stripe Element中 `集成错误我们无法从指定的元素检索数据。请我...

如何使用DomDocument通过id获取值？

我正在尝试使用 DomDocument 获取下面表单的值，但到目前为止仍然失败我正在尝试使用 DomDocument 获取下面表单的值，但到目前为止仍然失败 <?php $string ='<form action="profile" method="post" enctype="multipart/form-data"> <input type="hidden" name="id_user" id="id_user" value="123"> <input type="hidden" name="logo" id="logo" value="path/to/logo1.png"> <input type="hidden" name="status" id="status" value="Ok"> <input type="submit" value="PROFILE"> </form>'; ?> 这种情况下如何正确使用DomDocument？我正在尝试下面的代码 $dom = new DomDocument(); $dom->loadHTML($string); $dom->getElementById("id_user"); 我期望得到 123 作为返回值 DomDocument 有点麻烦，但如果您遵循文档，您就可以到达那里。我找到了这条路线： $dom->getElementById("id_user")->attributes->getNamedItem("value")->value 返回： 123 参见：https://onlinephp.io/c/c37dc 可能还有其他方法可以做到同样的事情。

如何禁用元素或表单上的先前日期选择？

如何禁用 element 或表单上的先前日期选择？我制作了预订表格，或者我希望自动禁用之前的日期选择。请帮忙，没有任何选项可以使...

反应单元测试“不是函数”对象。<anonymous>

努力为使用 redux/sagas 的文件编写一些单元测试。 app.tsx 文件看起来像这样从 'react' 导入 React, { StrictMode } 从'react-dom'导入ReactDOM 导入 { Provider } f...

链接点击时的反应模式调用

使用react-modal，我需要通过锚标记或react-router-dom链接单击超链接时显示模式。示例：单击注册超链接，注册表模式应打开。

完整显示远程页面内容

我需要获取远程页面，修改一些元素（使用“PHP Simple HTML DOM Parser”库）并输出修改后的内容。远程页面存在问题，其中没有完整的 URL

PHP - 完整显示远程页面的内容

我需要获取远程页面，修改一些元素（使用“PHP Simple HTML DOM Parser”库）并输出修改后的内容。没有完整 URL 的远程页面存在问题...

html2canvas 生成的图像与 DOM 非常不同

我遇到了 html2canvas 无法准确呈现节点显示方式的问题。我知道它对 CSS 属性的支持有限，我们在这里使用转换属性。有没有人知道...

反应问题，当我将标头组件添加到我的主页组件时，没有任何内容加载

从“react”导入React；从 '@chakra-ui/react' 导入 { ChakraProvider, CSSReset }; 从 'react-router-dom' 导入 { BrowserRouter as Router, Route, Routes }; 从 './nav' 导入导航；导入首页

创建新的 React 应用程序时遇到麻烦

当我尝试创建一个新的 React 应用程序时，我收到以下错误消息，安装软件包。这可能需要几分钟。安装中 React、react-dom 和带有 cra-temp 的 React-scripts...

检测具有委托的元素内部的单击以及何时通过其类名称选择该元素

如何检测单击是否位于其侦听器被类选择的元素内部？例如，我有一些类名为“my-class”的元素：如何检测单击是否位于其侦听器被类选择的元素内部？例如，我有一些类名为“my-class”的元素： <div class="my-class"> <button>Hello</button> <p>World</p> </div> <div class="my-class"> <a href="">Click</a> <a href="">Here</a> </div> 如果我只听课，点击内部元素是不行的： document.addEventListener("click", function(event) { if(event.target.classList.contains("my-class") { // } }); 我怎样才能检测到对其中任何元素的点击？我发现了以下问题，但它仅适用于由 id 选择且没有委托的单个元素： Detect click inside/outside of element with single event handler 使用Element::closest()检查被点击的元素是在my-class内部还是my-class本身： https://developer.mozilla.org/en-US/docs/Web/API/Element/closest document.addEventListener("click", function(event) { if(event.target.closest(".my-class")) { console.log('my-class clicked!'); } event.preventDefault(); }); <div class="my-class"> <button>Hello</button> <p>World</p> </div> <div class="my-class"> <a href="">Click</a> <a href="">Here</a> </div>

什么在 Next.js next/navigation 中的react-router-dom 中替换 useLocation() ？

最近，我从 React 迁移到 Next.js [email protected]。在我的网站中，我在使用 useNavigate() 推送时使用了状态，并使用 useLocation() 从另一个页面获取值。我怎样才能做同样的事...

在发布为 npm 包之前使用 npm 链接测试组件时出现重复的 ReactJS 导入问题

我有一个像这样的简单组件。从'react'导入React，{useState}；函数 MyComponentWithState(props) { const [值，setValue] = useState(0); 返回（我的价值... 我有一个像这样的简单组件。 import React, {useState} from 'react'; function MyComponentWithState(props) { const [value, setValue] = useState(0); return ( <p>My value is: {value}</p> ) } export default MyComponentWithState; 我想将它作为单独的包发布在 NPM 上。因此，为此我准备了 package.json 和 webpack.config.js，如下所示。 package.json： { "name": "try-to-publish", "version": "0.0.1", "description": "Just a test", "main": "build/index.js", "scripts": { "start": "webpack --watch", "build": "webpack" }, "author": { "name": "Behnam Azimi" }, "license": "ISC", "peerDependencies": { "react": "16.9.0", "react-dom": "16.9.0" }, "dependencies": { "react": "16.9.0", "react-dom": "16.9.0", "prop-types": "15.7.2", "react-scripts": "3.1.1", "webpack": "4.39.3" }, "devDependencies": { "@babel/core": "7.6.0", "@babel/plugin-proposal-class-properties": "7.5.5", "@babel/preset-env": "7.6.0", "@babel/preset-react": "7.0.0", "babel-loader": "8.0.6", "babel-plugin-transform-object-rest-spread": "6.26.0", "babel-plugin-transform-react-jsx": "6.24.1", "css-loader": "3.2.0", "node-sass": "4.12.0", "sass-loader": "8.0.0", "style-loader": "1.0.0", "webpack-cli": "3.3.8", "webpack-external-react": "^1.1.2" } } webpack.config.json： const path = require('path'); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'build'), filename: 'index.js', libraryTarget: 'commonjs2' }, module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, include: path.resolve(__dirname, 'src'), use: { loader: "babel-loader" } }, ] }, resolve: { alias: { 'react': path.resolve(__dirname, 'node_modules/react'), 'react-dom': path.resolve(__dirname, 'node_modules/react-dom'), } }, externals: { 'react': "commonjs react", 'react-dom': "commonjs react-dom" }, }; 这是我的 .babelrc: { "presets": [ "@babel/preset-env", "@babel/preset-react" ], "plugins": ["@babel/plugin-proposal-class-properties"] } 当我将组件发布到 NPM 并使用 `npm install 将其安装到我的另一个 ReactJs 项目中时，这些配置就像魅力一样，但我的观点是本地测试！我想在发布之前测试这个组件/库。为此，我使用 npm link 功能将我的组件与我的主 ReactJS 项目链接起来。正如您在上面看到的，我的组件是功能性的，我也使用了钩子。因此，当我将本地链接的库注入到我的主 ReactJs 项目中时，会遇到此错误，无效的挂钩调用。钩子只能在函数组件的主体内部调用。发生这种情况可能是由于以下原因之一： 1.您的React和渲染器版本可能不匹配（例如React DOM） 2. 你可能违反了 Hooks 规则 3. 您可能在同一个应用程序中拥有多个 React 副本我的问题与第三个原因有关。我的项目使用 ReactJs 并导入一次，我的组件也会导入 React！我的意思是在一个项目中两次 React 导入！. 我的 Webpack 配置中还有关于 react 和 react-dom 的 externals 配置。我应该怎么做才能解决这个问题？我的错误在哪里？更新：我也尝试过 @sung-m-kim 和 @eddie-cooro 所说的，但没有成功！意思是，我更改了 package.json 并从 react 中删除了 react-dom 和 dependencies 并将它们添加到 devDpendencies。我终于通过这些步骤解决了这个问题。运行npm链接里面 <your-library-package>/node_modules/react 还有运行npm链接里面 <your-library-package>/node_modules/react-dom 然后在应用程序根目录中运行 npm link react 和 npm link react-dom 并且不要忘记将 React 和 React-dom 作为库中的外部对象保留 // webpack.config.js const externals = { "react": "react", "react-dom": "react-dom", } module.exports = { . . . externals } 我解决了我的问题。我使用 RollupJS 而不是 Webpack 作为捆绑工具进行捆绑。这是我的rollup.config.js： import {uglify} from 'rollup-plugin-uglify' import babel from 'rollup-plugin-babel' export default { input: "./src/index.js", external: ['react', 'react-dom'], output: { name: 'test-lib', format: "cjs", }, plugins: [ babel({ exclude: "node_modules/**" }), uglify(), ], }; 和我的package.json： { "name": "test-lib", "version": "1.0.0", "main": "dist/test-lib.min.js", "scripts": { "build": "rollup -c -o dist/test-lib.min.js" }, "author": "Behnam Azimi", "license": "ISC", "peerDependencies": { "react": "^16.9.0", "react-dom": "^16.9.0" }, "devDependencies": { "@babel/core": "^7.6.0", "@babel/preset-env": "^7.6.0", "@babel/preset-react": "^7.0.0", "rollup": "^1.21.4", "rollup-plugin-babel": "^4.3.3", "rollup-plugin-commonjs": "^10.1.0", "rollup-plugin-uglify": "^6.0.3" } } 经过这些更改，npm link在我的ReactJS（Hooks）项目中真正发挥了作用。请注意，这只是一个简单的 Rollup 配置来展示我的解决方案，您可以在配置中添加多种内容，例如热重载、样式加载器和许多其他插件。仅在 package.json 的 react 部分（而不是 react-native）内设置 peerDependencies 和 dependencies 包。另外，对于本地开发（当您的包未包含在任何其他 React 项目中并且您想在本地运行它时），您可以使用 devDependencies 字段。我在打字稿反应项目中解决了这个问题。可能，当使用 npm link 时，请使用主应用程序项目和组件项目中的 react。因此，在您的 package.json 中从 react 和/或 dependencies 中删除 devDependencies 检查答案：https://stackoverflow.com/a/62807950/5183591 我也有同样的问题。就我而言，我开发了一些 UI 组件作为包，其中有一个包含 React 应用程序的示例文件夹，用于创建 React 应用程序。问题是，当我使用 npm i ../ 将包安装到示例应用程序中时，它会将包中的所有文件安装到示例应用程序中，包括 node_modules 文件夹。由于我已经安装了 react 和 react-dom 作为对等依赖项，示例应用程序现在有两个不同的 React 副本。从包中删除 node_module 文件夹并重新安装包再次解决了我的问题。

React（模块化CSS）中可以删除css类前缀吗

我正在使用 React 和 NextJS，我注意到在使用模块化 scss 文件时，它会使用文件名自动为我的类名添加前缀？有办法禁用这个吗？因为它使 DOM 变得相当

Puppeteer 在加载事件之前解析 dom

在我的木偶脚本中，我尝试打开一个需要 4-5 分钟的网站。页面加载事件完成。那是因为页面上的广告（特别是视频广告）需要很长时间。所以这是我的...

在React中不显示服务器上的图像

这是代码从“反应”导入反应；从“react-dom/client”导入ReactDOM； const 标头 = () => { 返回（ <... 这是代码 import React from "react"; import ReactDOM from "react-dom/client"; const Header = () => { return ( <div className="header"> <div className="logo-container"> <img className="logo" src="/assets/logo.jpg" /> </div> <div className="nav-items"> <ul> <li>Home</li> <li>About us</li> <li>Contact us</li> <li>Cart</li> </ul> </div> </div> ); }; const AppLayout = () => { return ( <div className="App"> <Header /> </div> ); }; const root = ReactDOM.createRoot(document.getElementById("root")); root.render(<AppLayout />); 请帮助我，因为我是新反应。我期待在服务器上显示图像如果仍然不起作用，请尝试在上面的代码中添加 alt 标签试试这个：从“react”导入React；从“react-dom/client”导入 ReactDOM； const Header = () => { return ( <div className="header"> <div className="logo-container"> <img className="logo" src={process.env.PUBLIC_URL + "/assets/logo.jpg"} alt="Logo" /> </div> <div className="nav-items"> <ul> <li>Home</li> <li>About us</li> <li>Contact us</li> <li>Cart</li> </ul> </div> </div> ); }; const AppLayout = () => { return ( <div className="App"> <Header /> </div> ); }; const root = ReactDOM.createRoot(document.getElementById("root")); root.render(<AppLayout />);

无法解决依赖关系：来自@material-ui/[email protected]的peer React@"^16.8.0 || ^17.0.0"

我使用创建了一个反应项目 npm 初始化 -y npm 安装 React React-dom 然后我尝试安装 Material UI npm 安装@material-ui/core 它得到错误 npm 错误！代码 ERESOLVE npm 错误！解决...

为什么当我尝试安装另一个依赖项时会收到有关一个依赖项的错误？

当我尝试安装 @types/react 和 @types/react-dom 时，出现有关依赖项冲突的错误。这个错误是什么意思？我的 React-persian-datepicker 包出了什么问题？我认为

检查我在React Js中的路线

如果我在某条路线中导航，我想做一个三叶草，然后如果我在我想要的路线中，则有条件地执行一个函数，但我找不到一种方法来做到这一点。我想使用 React router dom 但如果...

[Vue3]：异步非阻塞组件渲染，使得渲染视图（页面 DOM）先于视图模型

我有一个包含许多组件的 SPA，其中一些组件包含很长的任务（~ 6 秒）。在应用程序中导航时，它看起来像是挂起的（因为任务很长）。为了解决我的问题...

如何在node js中使用DOM更改文本内容

我想做的是我想在输入错误密码时将标签更改为错误密码但出现错误 ReferenceError：文档未定义这是我的 HTML 文件我想做的是我想在输入错误密码时将标签更改为错误密码但出现错误 ReferenceError：文档未定义这是我的 HTML 文件 <form action="/check" method="POST"> <label for="password">Password:</label> <input type="text" id="password" name="password" required> <input type="submit" value="Submit"> <p></p> </form> 这是我的 javascript 文件内容 import express from "express"; import {dirname} from "path"; import { fileURLToPath } from "url"; import bodyParser from "body-parser"; const __dirname = dirname(fileURLToPath(import.meta.url)); const app = express(); const port = 3000; const pass = "ILoveProgramming"; var enter = ""; app.use(bodyParser.urlencoded({extended:true})); function checker(req, res, next){ enter = req.body.password; console.log(enter); next(); } app.use(checker); app.get("/", (req,res) =>{ res.sendFile(__dirname +"/public/index.html"); }); app.post("/check",(req,res)=>{ if(pass === enter){ res.sendFile(__dirname+"/public/secret.html"); } else{ document.querySelector("p").textContent("The paswrd is wrong"); console.log("The password is incorrect"); } // console.log(enter); }); app.use(bodyParser); app.listen(port, () =>{ console.log(`server is live at ${port}`); }); 我对这一切都是新手所以把我当作一个没有任何经验的人 document对象是浏览器DOM API的一部分，它在服务器端不可用。在浏览器控制台上，它是 window 对象的属性。 window.document。您正在尝试操作服务器上的 DOM，这是不可能的。您应该在浏览器接收并呈现 HTML 页面后在客户端处理 DOM 操作。为此，您应该在 HTML 文件内有一个 script 标签。 <script> // inside here you add your logic to access document <script/> script标签将在浏览器上执行，您可以访问此标签内的document对象

添加新图像时，dom 中先前添加的图像开始显示微调器

我有这个简单的应用程序，我可以在其中显示图像，也可以添加更多图像。因此，当我添加图像时，我会在加载时显示一个微调器，然后在加载完成时隐藏该微调器。但问题是当...

使用 Javascript 更改 HTML 中的文本

如何用 Javascript 替换 HTML 中的文本？在下面的代码片段中，我需要将文本“作者说”替换为“关于作者”。谢谢你！如何用 Javascript 替换 HTML 中的文本？在下面的代码片段中，我需要将文本“作者说”替换为“关于作者”。谢谢！ <div id="author-info"> <div class="author-image"> <a class="author-avatar" href="https://www.test.com"><img alt=""></a> </div> <div class="author_name_wrap"> <h4 class="author_name"><a href="https://www.test.com/author/">Author say</a></h4> <div class="author_socicons"></div> </div> </div> 要更改 html 标签的内容，请使用 innerHTML 属性： var h4 = document.getElementsByClassName("author_name")[0], target = h4.childNodes[0]; target.innerHTML = "About the author"; 这是代码： document.getElementById("id-of-element").innerHTML = "new text"; <!DOCTYPE html> <html> <body> <p id="id-of-element">This text will be replaced</p> </body> </html> 这非常简单，您只需使用innerText或textcontent，如下例所示 //textConent Method const authorName = document.querySelectorAll('author_name').textContent="Text Here" //innerText Method const authorName = document.querySelectorAll('author_name').innerText="Text Here" 如果您使用jQuery，您可以轻松更改。 $("h4.author_name a").text('关于作者'); 您可以在这里找到详细的文章

如何将React项目用于html网站的整个子路由

我有一个现有的 HTML 页面和一个 React 项目。如何连接它们？首页.html 进入React页面应用程序.js 我有一个现有的 HTML 页面和一个 React 项目。如何连接它们？ home.html <button>go to React page</button> 应用程序.js <BrowserRouter> <Routes> <Route path="/mypage" element={<Mypage />}> </Routes> </BrowserRouter> 我想点击“转到React页面”按钮，我可以导航到"/mypage"？该按钮应实现对 "/mypage" URL 的导航操作，该 URL 最好为您的 React 应用程序提供服务。 home.html 更新按钮以包含重定向到子路线的点击处理程序 <button onclick="navigateToReactApp()">go to React page</button> const navigateToReactApp = () => { window.location.href = "/mypage"; // check the path correctness }; 或者使用锚标记，这在语义上可能更正确。 <a href="/mypage">go to React page</a> App.js 通过设置 "/mypage" 属性，更新路由器以使所有路由/链接/等从托管/服务应用程序的 basename relative 工作。 <BrowserRouter basename="/mypage"> <Routes> <Route path="/" element={<Mypage />}> </Routes> </BrowserRouter>

如何使用 JS 延迟加载新的 Google Adsense 代码

谷歌已取代 <question vote="1"> <p>谷歌已取代 <br/></p> <p><pre><code><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js</script></code></pre> <br/></p> <p>与<br/></p> <p><pre><code><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"</script></code></pre> <br/></p> <p><strong>参考</strong>：<a href="https://support.google.com/adsense/answer/10627874" rel="nofollow noreferrer">Google Adsense 公告</a><br/></p> <p><strong>旧的 Adsense 代码就像：</strong></p> <pre><code><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX" crossorigin="anonymous"></script> <ins class="adsbygoogle" style="display:inline-block;width:350px;height:90px" data-ad-client="ca-pub-XXXXXXXXXXXXXXXX" data-ad-slot="XXXXXXXXXX"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </code></pre> <p><strong>新的 Adsense 代码如下：</strong></p> <pre><code><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX" crossorigin="anonymous"></script> <ins class="adsbygoogle" style="display:inline-block;width:350px;height:90px" data-ad-client="ca-pub-XXXXXXXXXXXXXXXX" data-ad-slot="XXXXXXXXXX"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </code></pre> <p><strong>页面加载完成后加载广告的旧 JS 代码是：</strong></p> <pre><code> <script type="text/javascript"> function downloadJSAtOnload() { var element = document.createElement("script"); element.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"; document.body.appendChild(element); } if (window.addEventListener) window.addEventListener("load", downloadJSAtOnload, false); else if (window.attachEvent) window.attachEvent("onload", downloadJSAtOnload); else window.onload = downloadJSAtOnload; </script> </code></pre> <p>由于在新广告代码的脚本标签中添加了<pre><code>?client=ca-pub-xxxxxx" crossorigin="anonymous"</code></pre>，那么现在加载广告的新JS代码是什么？</p> </question> <answer tick="true" vote="1"> <p>嗯，这并不是真正的延迟加载，这是延迟加载，不推荐，但你就可以了</p> <pre><code><script> function downloadJSAtOnload() { var element = document.createElement("script"); element.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX"; element.async = true; element.setAttribute('crossorigin', 'anonymous'); document.body.appendChild(element); } if (window.addEventListener) window.addEventListener("load", downloadJSAtOnload, false); else if (window.attachEvent) window.attachEvent("onload", downloadJSAtOnload); else window.onload = downloadJSAtOnload; </script> </code></pre> <p>如果您正在寻找延迟加载 AdSense，请查看 <a href="https://www.guest.blog/post/12068/lazy-loading-adsense-ads/" rel="nofollow noreferrer">延迟加载 Adsense</a></p> </answer> <answer tick="false" vote="0"> <blockquote> <h2>引用的标题##<script async</h2> <p>src="https://pagead2.googlesyndicate.com/pagead/js/adsbygoogle.js?client=ca-pub-1049121221402917" 跨桥=“匿名”></p> </blockquote> </answer> </body></html>

在Java中将流转换为字符串

我想将 Map<> 的流转换为字符串，并将其附加到文本区域。我尝试了一些方法，最后一个使用 StringBuilder，但它们不起作用。公开我想将 Map<> 的流转换为字符串，并将其附加到文本区域。我尝试了一些方法，最后一个使用 StringBuilder，但它们不起作用。 public <K, V extends Comparable<? super V>> String sortByAscendentValue(Map<K, V> map, int maxSize) { StringBuilder sBuilder = new StringBuilder(); Stream<Map.Entry<K,V>> sorted = map.entrySet().stream() .sorted(Collections.reverseOrder(Map.Entry.comparingByValue())); BufferedReader br = new BufferedReader(new InputStreamReader((InputStream) sorted)); String read; try { while ((read=br.readLine()) != null) { //System.out.println(read); sBuilder.append(read); } } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } sorted.limit(maxSize).forEach(System.out::println); return sBuilder.toString(); } 您可以将条目收集到一个String中，如下所示： String sorted = map.entrySet().stream() .sorted(Collections.reverseOrder(Map.Entry.comparingByValue())) .map(e-> e.getKey().toString() + "=" + e.getValue().toString()) .collect(Collectors.joining (",")); 考虑对 @Eran 的代码进行轻微更改，因为 HashMap.Entry.toString() 已经通过 = 为您加入了： String sorted = map.entrySet().stream() .sorted(Collections.reverseOrder(Map.Entry.comparingByValue())) .map(Objects::toString) .collect(Collectors.joining(",")); 这很容易做到，您可以使用 Steams API 来做到这一点。首先，将映射中的每个条目映射到单个字符串 - 键和值的连接字符串。一旦你有了这个，你就可以简单地使用 reduce() 方法或 collect() 方法来做到这一点。使用“reduce()”方法的代码片段将如下所示： Map<String, String> map = new HashMap<>(); map.put("sam1", "sam1"); map.put("sam2", "sam2"); String concatString = map.entrySet() .stream() .map(element-> element.getKey().toString() + " : " + element.getValue().toString()) .reduce("", (str1,str2) -> str1 + " , " + str2).substring(3); System.out.println(concatString); 这将为您提供以下输出： sam2 : sam2 , sam1 : sam1 您还可以使用 collect()' method instead ofreduce()` 方法。它看起来像这样： String concatString = map.entrySet() .stream() .map(element-> element.getKey().toString() + " : " + element.getValue().toString()) .collect(Collectors.reducing("", (str1,str2) -> str1 + " , " + str2)).substring(3); 两种方法给出相同的输出。

使用selenium在联合选择/列表元素中导航

我正在使用 beautifulSoup / selenium 进行一些网络抓取，但在使用某个下拉选择菜单时遇到了困难。粗略的 HTML 如下：我正在使用 beautifulSoup / selenium 进行一些网络抓取，但在使用某个下拉选择菜单时遇到了困难。粗略的HTML如下： <div class="selection-box" alt="selection" title="selection" role="select" tabindex="0"> <select id="select" style="display: none;"> <option value="1">First</option> <option value="2">Second</option> <option value="3" selected="selected">Third</option> </select> <div class="current">Third</div> <ul class="options" style="display: none;"> <li class="search--option" alt="First option" title="First option" aria-label="First option" role="option" tabindex="0">First</li> <li class="search--option" alt="Second option" title="Second option" aria-label="Second option" role="option" tabindex="0">Second</li> <li class="search--option selected" alt="Third option" title="Third option" aria-label="Third option" role="option" tabindex="0">Third</li> </ul> 当我通过浏览器操作菜单时，它会发生如下变化：包装 div 类更改为“选择框活动” ul 更改为“display: block” 一旦我选择了不同的选项，这两个选项就会再次颠倒，中间的 div 和所选的 li 项目也会相应变化我想使用selenium来选择某个选项。到目前为止，我尝试了以下方法： from selenium.webdriver.support.ui import Select drpBrand = driver.find_element(By.ID, "select"); css = 'select#select' # css selector of the element js = """const data_options = Array.from(document.querySelectorAll('{css}')); data_options.forEach(a=>{{a.style='display:block;';}});""".format(css=css) driver.execute_script(js) drpBrand.select_by_visible_text("Third"); 这是使用各种线程的最佳方法（元素不可见：元素当前不可见并且可能无法操作 - Selenium webdriver，How to select a dropdown value in Selenium WebDriver using Java），但它仍然没有不工作。有任何想法吗？我想我还需要定位列表（除了选择之外）？错误总是存在 selenium.common.exceptions.ElementNotInteractableException：消息：元素不可交互：元素当前不可见，可能无法操作谢谢如果我正确理解您的目标（选择下拉选项），我建议模拟本机用户行为并依赖可见元素。下拉元素有选择器 .superstar-search--selection-box。您应该等待它出现并单击它。下拉选项有选择器 .superstar-search--option 。您应该等待此元素的可见性并过滤它们，例如，通过包含文本条件。您可以通过将下拉打开选择器和下拉选项选择器定义为函数参数来构建比我编写的更复杂的函数。 from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.support.ui import WebDriverWait from selenium.webdriver.support import expected_conditions as EC driver = webdriver.Chrome() driver.get("https://www.wwe.com/superstars") wait = WebDriverWait(driver, 15) def select_dropdown_option_by_text(text): dropdown = wait.until(EC.presence_of_element_located((By.CSS_SELECTOR, '.superstar-search--selection-box'))) dropdown.click() options = wait.until(EC.visibility_of_all_elements_located((By.CSS_SELECTOR, '.superstar-search--option'))) expected_option = [element for element in options if element.text.lower() == text] expected_option[0].click() select_dropdown_option_by_text('all superstars')

如何使用 javascript（无 jquery）将两个标签之间的所有标记检索到字符串中

假设已使用 const foo = document.getElementById("#foo") 之类的内容选择了屏幕元素，我想检索该元素标签之间的所有标记假设已使用 const foo = document.getElementById("#foo") 之类的内容选择了屏幕元素，我想检索该元素标签之间的所有标记<div id="foo">...</div> 我发现的问题是它只返回 dom 树中的一层。有没有办法检索all标记？ IE。为了<div id="foo"> <ul><li>item1</li><li>item2</li></ul></div> 试试这个代码： const foo = document.getElementById("foo"); const 标记 = foo.outerHTML; 我希望这有帮助！

为什么我在GWT中无法隐藏UiBinder中的DialogBox？

在 Test.ui.xml 中测试一些小部件.. 在Test.ui.xml <g:DialogBox ui:field="wishlistDialogBox" autoHide="true"> <g:caption>Test</g:caption> <g:HTMLPanel> some widgets..</g:HTMLPanel> </g:DialogBox> 运行后，应用程序仍然显示DialogBox，所以我尝试在TestView.java中为“wishlistDialogBox”设置隐藏，但没有成功。 @UiField DialogBox wishlistDialogBox; @Inject public TestView(final Binder binder) { widget = binder.createAndBindUi(this); wishlistDialogBox.hide(); } 然后我在TestPresenter.java中为它设置了隐藏，但仍然不起作用 @Override protected void onBind() { super.onBind(); getView().getWishlistDialogBox().hide(); } 怎么了，古德尔根本没有解释。另外，DialogBox如何重复使用？当谈论将它们添加到 DOM 时，DialogBox（以及一般的 PopupPanel）不像任何其他小部件那样工作。您永远不应该像以前那样将它们直接附加到它（即 panel.add(yourDialogBox) 或在 UiBinder XML 文件中）。相反，您应该创建它们，然后简单地调用 hide()/show() 以及类似的方法，以使其显示/隐藏（即，在 DOM 的末尾附加/分离）。对我有用的是与任何其他小部件分开创建一个对话框。所以它有自己的 Java 文件和自己的 ui.xml 文件： UiBinder xml文件： <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui"> <g:DialogBox ui:field="dialog"> <g:caption>My Dialog</g:caption> <g:HTMLPanel> <g:Button ui:field="closeButton" text="close" /> </g:HTMLPanel> </g:DialogBox> </ui:UiBinder> Java 文件： public class MyDialog { // here you do not inherit anything private static MyDialogUiBinder uiBinder = GWT.create(MyDialogUiBinder.class); interface MyDialogUiBinder extends UiBinder<Widget, MyDialog> { } @UiField DialogBox dialog; @UiField Button closeButton; public MyDialog() { // make cast to DialogBox dialog = (DialogBox) (uiBinder.createAndBindUi(this)); } public void hide() { dialog.hide(); } public void show() { dialog.center(); } @UiHandler("closeButton") public void onClick(ClickEvent event) { hide(); } } 最后我想出了一个办法，那就是把DialogBox放到一个看不见的HTMLPanel <g:HTMLPanel visible="false"> <g:DialogBox ui:field="wishlistDialogBox" autoHide="true"> <g:caption>Test</g:caption> <g:HTMLPanel> some widgets..</g:HTMLPanel> </g:DialogBox> </g:HTMLPanel> 然后像往常一样调用 show & hide DialogBox，即使 DialogBox 被包裹在一个看不见的 DialogBox 中，它也会显示 HTMLPanel。 getView().getWishlistDialogBox().show();

有什么问题吗？文本区域什么也没显示，但值是

我正在编写代码以在中以灰色向用户显示提示；接下来的想法是：最初以灰色显示“请在此处输入您的询问”；如果用户点击它，颜色会变为...</desc> <question vote="3"> <p>我正在编写代码以在 <pre><code><textarea/></code></pre> 中以灰色向用户显示提示；</p> <p>下一个想法是：</p> <ol> <li>最初将<pre><code>'Please, type your inquiry there'</code></pre>置于灰色；</li> <li>如果用户单击它，颜色将变为黑色，文本将变为 <pre><code>''</code></pre>。这部分工作正常；</li> <li>如果用户输入然后删除（即将字段留空），那么我们需要将 <pre><code>'Please, type your inquiry there'</code></pre> 放回灰色。</li> </ol> <p>步骤 (3) 在 Chrome 和 Firefox 中均不起作用。它什么也没显示。当我使用 Chrome 检查器时，它显示：</p> <blockquote> <p>element.style { 颜色: rgb(141, 141, 141); }</p> </blockquote> <p>这是正确的，而 HTML 中的 <pre><code>"Please, type your inquiry there"</code></pre> 也是正确的。但场地是空的。可能是什么问题？？？我特别使用了 <pre><code>console.log()</code></pre>，它们还显示应该是......的输出 </p>这是 HTML 和 JS 代码：<p> </p><code><textarea name='contact_text' id='contact_text' onclick='text_area_text_cl();' onBlur='text_area_text_fill();'> </textarea> <script> var contact_text_changed = false; var contact_contacts_changed = false; function text_area_text() { if (contact_text_changed == false) { $("#contact_text").css("color","#8d8d8d"); $("#contact_text").html('Please, type your inquiry there'); } else { $("#contact_text").css("color","#000000"); } // Write your code here }; function text_area_text_cl() { if (contact_text_changed == false) { $("#contact_text").text(''); $("#contact_text").css("color","#000000"); console.log('sdfdfs111'); contact_text_changed = true; } }; function text_area_text_fill() { if ($("#contact_text").val() == '') { contact_text_changed = false; $("#contact_text").css("color","#8d8d8d"); $("#contact_text").html('Please, type your inquiry there'); //document.getElementById('contact_text').innerHTML = 'Please, type your inquiry there' console.log('sdfdfs'); } else { console.log('__'); } }; // call functions to fill text_area_text(); </script> </code><pre> </pre> </question> <answer tick="true" vote="3">要设置 <p><code><textarea></code><pre> 的值，您需要使用 </pre><code>.val()</code><pre>:</pre> </p><code>$("#contact_text").val(''); </code><pre> </pre>或<p> </p><code>$("#contact_text").val('Please, type your enquiry there'); </code><pre> </pre>等等。让“占位符”代码正常工作是很棘手的。 <p>较新的浏览器允许<a href="http://caniuse.com/#search=placeholder" rel="nofollow">：</a> </p><code><textarea placeholder='Please, type your enquiry there' id='whatever'></textarea> </code><pre> </pre>他们会为您管理这一切。<p> </p><p>编辑<em> - 从评论中，这里解释了为什么 </em><code>.html()</code><pre> 最初有效（嗯，它</pre>确实<em>有效，但请继续阅读）。 </em><code><textarea></code><pre> 元素的标记内容（即元素中包含的 DOM 结构）表示 </pre><code><textarea></code><em> 的 </em>initial<pre> 值。在任何用户交互之前（和/或在 JavaScript 触及 DOM 的“value”属性之前），这就是显示为字段值的内容。然后，更改 DOM 的该部分就会更改该初始值。然而，一旦进行了一些用户交互，初始值就不再与页面视图相关，因此不会显示。仅显示更新后的值。</pre> </p> </answer></body>

向垫子表添加额外的行

所以我有一张垫子桌所以我有一张垫子桌 <mat-table class="table" cdkDropList cdkDropListOrientation="horizontal" (cdkDropListDropped)="tableDrop($event)" [dataSource]="tableDataSource"> <ng-container *ngFor="let column of columns; let i = index" [matColumnDef]="column.name"> <mat-header-cell *matHeaderCellDef cdkDrag dkDragLockAxis="x" cdkDragBoundary="mat-header-row"> {{ column.title }} </mat-header-cell> <mat-cell *matCellDef="let element"> {{ element[column.name] }} </mat-cell> </ng-container> <mat-header-row class="tableHeader" *matHeaderRowDef="tableDisplayedColumns" #tableHeaderRow> </mat-header-row> <mat-row class="tableRow" *matRowDef="let row; columns: tableDisplayedColumns;" [class.selected-row]="tableSelectedRows.has(row)" (click)="selectUnselectRow(row)"> </mat-row> </mat-table> 但我需要在表标题下为相应的行过滤器添加一行。我尝试在标题和实际行声明之间添加 <mat-row> ，但是由于过滤器是不同的输入（例如数字、自动完成选择和多选），我无法 *ngFor 它们（而且我不是当然我是否能够）编辑：忘记发布过滤器 HTML <div class="filterGroup"> <mat-form-field class="filterField"> <input matInput type="number" (keydown)="updateManualPage(1)" placeholder="Filter za param1" formControlName="filterParam1"> </mat-form-field> <mat-form-field class="filterField"> <input matInput (keydown)="updateManualPage(1)" placeholder="Filter za param2" formControlName="filterParam2" [matAutocomplete]="autoSingleSelect"> <mat-autocomplete #autoSingleSelect="matAutocomplete" class="filterSelect" panelClass="filterSelect"> <mat-option *ngFor="let option of dropdownSingleFilteredOptions | async" [value]="option.param2"> {{option.param2}} </mat-option> </mat-autocomplete> </mat-form-field> <mat-form-field class="filterField"> <mat-select class="filterMultiselect" placeholder="Filter za param3" formControlName="filterParam3" multiple panelClass="filterMultiselect"> <mat-option *ngFor="let option of tableDataSource.data" [value]="option.param3"> {{option.param3}} </mat-option> </mat-select> </mat-form-field> </div> 以及相关组件.ts tableDisplayedColumns: string[] = ['param1', 'param2', 'param3']; columns: any[] = [ { name: 'param1', title: 'Param1' }, { name: 'param2', title: 'Param2' }, { name: 'param3', title: 'Param3' } ]; 为了解决这个问题，我设法通过删除 *ngFor 并手动放入过滤器来做到这一点。 <mat-table class="table" cdkDropList cdkDropListOrientation="horizontal" (cdkDropListDropped)="tableDrop($event)" [dataSource]="tableDataSource"> <ng-container matColumnDef="param1"> <mat-header-cell *matHeaderCellDef cdkDrag cdkDragLockAxis="x" cdkDragBoundary="mat-header-row" [cdkDragStartDelay]="100"> Param1 <mat-form-field class="filterField"> <input matInput type="number" (keydown)="updateManualPage(1)" placeholder="Filter" formControlName="filterParam1"> </mat-form-field> </mat-header-cell> <mat-cell *matCellDef="let data"> <span>{{data.param1}}</span> </mat-cell> </ng-container> <ng-container matColumnDef="param2"> <mat-header-cell *matHeaderCellDef cdkDrag cdkDragLockAxis="x" cdkDragBoundary="mat-header-row" [cdkDragStartDelay]="100"> Param2 <mat-form-field class="filterField"> <input matInput (keydown)="updateManualPage(1)" placeholder="Filter" formControlName="filterParam2" [matAutocomplete]="autoSingleSelect"> <mat-autocomplete #autoSingleSelect="matAutocomplete" class="filterSelect" panelClass="filterSelect"> <mat-option *ngFor="let option of dropdownSingleFilteredOptions | async" [value]="option.param2"> {{option.param2}} </mat-option> </mat-autocomplete> </mat-form-field> </mat-header-cell> <mat-cell *matCellDef="let data"> <span>{{data.param2}}</span> </mat-cell> </ng-container> <ng-container matColumnDef="param3"> <mat-header-cell *matHeaderCellDef cdkDrag cdkDragLockAxis="x" cdkDragBoundary="mat-header-row" [cdkDragStartDelay]="100"> Param3 <mat-form-field class="filterField"> <mat-select class="filterMultiselect" placeholder="Filter" formControlName="filterParam3" multiple panelClass="filterMultiselect"> <mat-option *ngFor="let option of tableDataSource.data" [value]="option.param3"> {{option.param3}} </mat-option> </mat-select> </mat-form-field> </mat-header-cell> <mat-cell *matCellDef="let data"> <span>{{data.param3}}</span> </mat-cell> </ng-container> <mat-header-row class="tableHeader" *matHeaderRowDef="tableDisplayedColumns" #tableHeaderRow> </mat-header-row> <mat-row class="tableRow" *matRowDef="let row; columns: tableDisplayedColumns;" [class.selected-row]="tableSelectedRows.has(row)" (click)="selectUnselectRow(row)"> </mat-row> </mat-table>

似乎无法让下载属性发挥作用

我刚刚开始学习 html 所以我想尝试使用 download 属性我刚刚开始学习 html，所以我想尝试使用下载属性 <a href="../images/clunk.jfif" download="ur_mum"> <img src="../images/clunk.jfif" alt="ur mum" width="200" height="200"> </a> 图像存储在同一个网站上，但是当我单击它而不是下载时，它只会使图像全屏显示。我尝试尽可能地排除故障，但没有成功我能找到的关于为什么某些文件类型发生这种情况但并非所有文件类型的原因是这个答案关于pdf下载与预览的类似问题 - 如果可以的话，请将以下标头添加到服务器端的图像响应中： Content-Disposition: attachment; filename=clunk.jfif 或者，您可以使用自定义 onclick 处理程序替换锚标记，该处理程序将图像转换为数据 URL 并触发下载： <img src="../images/clunk.jfif" width="200" height="200" onclick="downloadImage(this)"> const downloadImage = async (img) => { // fetch the image's media type const mediaType = fetch(img.currentSrc, { method: 'HEAD' }) .then(res => res.headers.get('content-type')) .catch(() => 'image/png' /* default to png if request fails */) // place the image on a canvas element const canv = Object.assign(document.createElement('canvas'), { width: img.naturalWidth, height: img.naturalHeight, }) const ctx = canv.getContext('2d') ctx.drawImage(img, 0, 0) // download the canvas data const a = Object.assign(document.createElement('a'), { download: 'filename', href: canv.toDataURL(await mediaType), }) a.click() }

React-Pixi 入口/react-pixi 中的屏蔽

我用于精灵的图像比所需的大得多（910px）。我需要动态更改容器的高度，遮盖图像。有谁知道如何做到这一点？我用于精灵的图像比所需的大得多（910 像素）。我需要动态更改容器的高度，遮盖图像。有人知道该怎么做吗？ <Container x={x} y={y} width={width} height={height}> <Sprite image={image} anchor={[0, 0]} x={0} y={0} width={width} height={910} rotation={0} /> </Container> @inlet/react-pixi: "^1.1.9" pixi.js: "^5.2.0" react: "^16.12.0" react-dom: "^16.12.0" 不幸的是，这也不起作用，因为纹理保持静态，而矩形四处移动 <Graphics draw={(g) => { g.clear() const texture = new PIXI.Texture.from(image) g.beginTextureFill(texture) g.drawRect(x, y, width, height) g.endFill() }} /> 试试这个： const maskRef = useRef() <Container mask={maskRef?.current} x={x} y={y} width={width} height={height}> <Graphics name="mask" draw={React.useCallback( (g) => { g.beginFill(0x000000) g.drawRect(0, 0, size.width + 3, size.height + 3) g.endFill() }, [width, height] )} ref={maskRef} /> <Sprite image={image} anchor={[0, 0]} x={0} y={0} width={width} height={910} rotation={0} /> </Container> 官方文档位于此处，解释其工作原理和局限性

Alpine.js 和 jQuery DataTables，x-on：在表内触发时单击功能不全

我的 Laravel 和 Alpine.js 刀片页面中有此表。名字我的 Laravel 和 Alpine.js 刀片页面中有此表。 <table id="projects-table"> <thead> <tr> <th>name</th> <th>actions</th> </tr> </thead> <tbody> @foreach($projects as $project) <tr> <td>{{ $project->name }}</td> <td><button x-data="{}" x-on:click="$dispatch('open-modal', 'edit-project')">edit</button></td> </tr> @endforeach </tbody> </table> 有了它，我有了这个 JavaScript 代码，可以将其转换为 jQuery DataTable document.addEventListener('DOMContentLoaded', function () { new DataTable('#projects-table'); }); 现在发生的情况是，当我单击 button 内的 td 时，我的模式不会触发当表不是 DataTable 时，一切正常。基本上发生了什么（可能），当 jQuery 操作元素时，@click 事件不会触发。有任何已知的修复方法吗？感谢所有帮助。解决方案是将表包含在由 Alpine 控制的标签中，并在 Alpine 启动后初始化 DataTable： <div x-data> <table id="projects-table">  </table> </div> <script> document.addEventListener('alpine:init', () => { new DataTable('#projects-table') }); </script> 通过这种方式，Alpine 可以检测到 DOM 何时被 DataTables 更改，然后重建他的引用。否则，在您的具体情况下，您可以使用 vanilla JS 发送自定义事件并保持其他内容不变：  <td> <button onclick="window.dispatchEvent(new CustomEvent('open-modal', { detail: 'edit-project' }))"> Edit </button> </td>   <div x-data="{isOpen: false}" x-show="isOpen" @open-modal.window="isOpen = true"> I'm open! <div>

dom-element 相关问题

最新问题