reactjs 相关问题

给定匹配多个元素的 getByRole 选择器。它会返回什么？ https://testing-library.com/docs/queries/byrole/ getByRole('按钮') 给定匹配多个元素的 getByRole 选择器。它会返回什么？ https://testing-library.com/docs/queries/byrole/ getByRole('button') <body> <main> <button>Open dialog</button> </main> <div role="dialog"> <button>Close dialog</button> </div> </body> 会返回什么？元素很少，有匹配的元素还是抛出错误？ https://testing-library.com/docs/queries/byrole/ 根据文档， getBy 方法“返回查询的匹配节点，如果没有元素匹配或如果找到多个匹配项，则抛出描述性错误”

reactjs testing jestjs testing-library react-testing

回答 1 投票 0

如何修复 Next.js 错误“取消渲染路由”？

我正在尝试链接到 div id，但收到此错误：错误：取消渲染路由这似乎是双重链接的问题。我已经在使用 useRouter 推送到 [slug]，因为 NextLink 是...

reactjs next.js

回答 2 投票 0

错误发生意外错误：“https://registry.yarnpkg.com/react: getaddrinfo EAI_AGAINregistry.yarnpkg.comregistry.yarnpkg.com:443”

纱线添加v1.3.2 [1/4] 正在解析包... 错误发生意外错误：“https://registry.yarnpkg.com/react: getaddrinfo EAI_AGAINregistry.yarnpkg.comregistry.yarnpkg.com:443”。信息如果您

reactjs

回答 5 投票 0

在 onBlur 模式下如何使用 React Hook Form 提交？

这不像这个问题所问的。基本上，我有一个表单，我想在字段更改时自动提交。 IE。我不需要提交按钮。所以，有了这个：常量{ 形式St...

reactjs typescript react-hook-form

回答 2 投票 0

错误：定义键“process.env.CommonProgramFiles(x86)”包含无效标识符“CommonProgramFiles(x86)”

之前我收到错误 TS1343: The 'import.meta' meta-property is only allowed when the '--module' option is 'es2020', 'es2022', 'esnext', 'system', ' node16' 或 'nodenext'。当我...

reactjs typescript jestjs vite react-testing-library

回答 1 投票 0

在触发 onClick 事件时无法将焦点设置在 Material UI 中的工具提示组件的内容上，但可以在触发 onKeyPress 事件时

我在自定义的 TooltipComponent 中使用 MUI 中的 Tooltip 组件。 TooltipComponent 的工作方式与 Dialog 类似：用户可以在单击（而不是悬停）元素（div 与...

reactjs material-ui onclick focus onkeypress

回答 3 投票 0

GetByRole 在反应测试中返回一些元素

reactjs testing jestjs react-testing

回答 1 投票 0

顶级等待在构建中给出错误，但在开发中工作

我的代码在运行 npm run dev 时可以工作，但是当我构建它时，它会出现此错误。根据文档，我需要在 tsconfig.json 中将目标设置为 ES2017 或更高版本，但我正在使用 ESNEXT，我相信它是

node.js reactjs typescript async-await vite

回答 2 投票 0

表单字段元素应具有 id 或 name 属性

以下是我的代码。以下是我的代码。 <TextInput label="Password" placeholder="Enter your password" password={true} //password passed to enable view password option value={password} handelChange={(e) => setPassword(e.target.value)} /> 我收到以下错误消息；表单字段元素既没有 id 也没有 name 属性。这可能会阻止浏览器正确自动填写表单。要解决此问题，请将唯一的 ID 或名称属性添加到表单字段。这不是严格需要的，但即使您在同一元素上有自动完成属性，仍然建议这样做。我尝试了以下方法，但它仍然给我一个错误； <label htmlFor="password">Password</label> <TextInput id="password" label="Password" placeholder="Enter your password" password={true} value={password} onChange={(e) => setPassword(e.target.value)} /> 该问题与缺少 ID 和名称属性的表单字段有关，这可能会阻止浏览器正确自动填写表单。如何解决这个问题是为你的表单元素添加一个 id 或名称，我假设你的 TextInput 组件有它们。您不应通过 TextInput 组件传递此 ID 或名称，您应该编辑 TextInput 组件返回的表单元素。我的建议是使用这种语法： <form> <input type="text" name="input-text1" /> <input type="text" name="input-text2" /> <input type="submit" name="input-submit" /> </form>

reactjs input error-handling label textformfield

回答 1 投票 0

React，手动移动 html/dom 的元素到不同的容器中

我在我的react代码中实现了tinymce，但它生成了一个与此类似的html ... 我在我的react代码中实现了tinymce，但它生成了一个与此类似的html <html> <body> <div id="root"> <div class="StyledGrommet-sc-xxx" > </div> </div> <div class="tox tox-silver-sink tox-tinymce-aux" style="position:relative;"></div> </body> </html> 但是这段代码给我带来了一些溢出问题，因为这个类，StyledGrommet-sc-xxx，由于w/e原因我无法更改。理想的解决方案是 React 会像这样渲染 html，但由于某种原因，tinymce 决定将其渲染在 root 之外（它是一个浮动工具栏，是 tinymce 组件的一部分） <html> <body> <div id="root"> <div class="StyledGrommet-sc-xxx" > </div> <div class="tox tox-silver-sink tox-tinymce-aux" style="position:relative;"></div> </div> </body> </html> 我正在考虑有人在 useEffect 中操纵 dom 将其附加到那里，但到目前为止我还没有能够这样做。这是组件（简化） export const Editor = ({ value, onChange }: Props) => { const editorRef = useRef<EditorType>(null); const [showSymbolModal, setShowSymbolModal] = useState(false); const [showImageModal, setShowImageModal] = useState(false); const [showIframeModal, setShowIframeModal] = useState(false); const [showHTMLModal, setShowHTMLModal] = useState(false); const onAddSymbol = (code: string) => { }; const onAddImage = (file: File) => { }; const onAddIframe = (iframe: string) => { editorRef.current.execCommand(IFRAME_ADD_COMMAND, true, iframe); setShowIframeModal(false); }; const onUpdateHTML = (html: string) => { editorRef.current.setContent(html); setShowHTMLModal(false); }; return ( <> {showImageModal && ( <UploadImageModal onImport={onAddImage} onCancel={() => { setShowImageModal(false); }} /> )} {showSymbolModal && ( <AddSymbolModal onAddSymbol={onAddSymbol} onCancel={() => { setShowSymbolModal(false); }} /> )} {showIframeModal && ( <AddIframeModal onAddIframe={onAddIframe} onCancel={() => setShowIframeModal(false)} /> )} {showHTMLModal && ( <HTMLModal html={editorRef.current.getContent()} onUpdate={onUpdateHTML} onCancel={() => { setShowHTMLModal(false); }} /> )} <Editor onEditorChange={(...props) => { console.log(props); }} onInit={(evt, editor) => { editorRef.current = editor; editor.addCommand("open_chars_dialog", () => { setShowSymbolModal(true); }); editor.addCommand(IMAGE_BUTTON_COMMAND, () => { setShowImageModal(true); }); editor.addCommand(IFRAME_BUTTON_COMMAND, () => { setShowIframeModal(true); }); editor.addCommand(HTML_BUTTON_COMMAND, () => { setShowHTMLModal(true); }); editor.ui.registry.addButton("parapraph-button", { text: "parapraph", onAction: api => { editor.formatter.apply("p"); } }); }} initialValue={value} init={{ height: 500, menubar: false, object_resizing: false, browser_spellcheck: true, plugins: [ "link", "lists", ], branding: false, contextmenu: false, formats: {}, toolbar: "paragraphs | bold italic underline strikethrough | subscript superscript | bullist numlist | link unlink | undo redo", toolbar_groups: { paragraphs: { icon: "blocks", items: "parapraph-button h2 h3 h4 h5 h6" } } }} /> </> ); }; const addImageToEditor = async (file: File, editor: EditorType) => { }; 我正在考虑做这样的事情 useEffect(() => { const rootDiv = document.getElementById("root"); const editorDiv = document.querySelector(".tox"); console.log(rootDiv) console.log(editorDiv) if (rootDiv && editorDiv) { rootDiv.appendChild(editorDiv); } }, []); 但是好像没效果很抱歉撞到这个旧线程，但我遇到了同样的问题，并找到了适合我的解决方案：https://github.com/tinymce/tinymce-react/issues/186#issuecomment-730083282 您必须将以下内容添加到 TinyMCE 的 init 组件上的 Editor 属性中： ... menubar: false, setup: function(editor) { editor.on('PostRender', function() { var container = editor.getContainer(); var uiContainer = document.querySelector('.tox.tox-tinymce-aux'); if (uiContainer === null) return; container?.parentNode?.appendChild(uiContainer); }); } ... 不确定它是否仍然对您有用，但希望对其他遇到此问题的人也有用😄

reactjs tinymce

回答 1 投票 0

reactjs 相关问题

最新问题