reactjs 相关问题

我想要一个适用于移动设备的特殊图像尺寸和另一个适用于大型设备的图像尺寸

您好，我想在小型设备上修改图像的大小和位置，唯一的事情是，当我进行更改时，它也会更改大型设备即使当我执行“sm：-300”时，我.. .

React 16 中的 Fragment 映射

我正在尝试映射片段的子级，而该片段又是组件的子级。例如： 常量碎片 = () => ( 测试1 我正在尝试映射片段的子级，而该片段又是组件的子级。例如： const Frag = () => ( <React.Fragment key="test-key"> <div>test1</div> <div>test2</div> </React.Fragment> ); const Outer = ({ children }) => ( <div> { React.Children.map(children, (child) => ( <a> {child} </a> )) } </div> ); // Usage <Outer> <Frag /> </Outer> 这将导致单个 a 标签，即使片段内部有多个 div。文档（https://reactjs.org/docs/react-api.html#reactchildrenmap）似乎表明这应该与键控片段一起使用，我认为我正在正确创建一个键控片段（https:// Reactjs.org/docs/fragments.html#keyed-fragments）。任何帮助将不胜感激！ 是的，但据我所知 - 您正在迭代 Outer 孩子。 尝试 React.Children.map(children[0].props.children, (child) => ( 但是，仔细查看您的链接 - 我发现文档在这里说错了 该函数永远不会传递容器对象 这是一个示例，清楚地表明容器被传递给函数： <script src="https://unpkg.com/@babel/standalone/babel.js"></script> <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script> <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script> <div id="root" /> <script type="text/babel"> const Frag = () => ( <> <div>test1</div> <div>test2</div> </> ); const Outer = ({ children }) => ( <div> { React.Children.map(children, (child) => console.log(`Child type is ${child.type.name || child.type.toString()}`) || ( <a> {child} </a> )) } </div> ); ReactDOM.render(( <div> <Outer> <> <div>test1</div> <div>test2</div> </> </Outer> <Outer> <Frag /> </Outer> </div> ), document.getElementById('root')); </script> 不要使用 React.Children.map，而是使用此 flatMapChildren 函数来展平 <>fragments</> 以及数组： import { Children } from 'react'; // TypeScript version export function flatMapChildren<R>(children: React.ReactNode, fn: (x: React.ReactNode) => R) { let results: R[] = []; flatForEachChild(children, child => results.push(fn(child))); return results; } export function flatForEachChild(children: React.ReactNode, action: (x: React.ReactNode) => void) { if (isFragment(children)) { flatForEachChild(children.props.children, action); } else { Children.forEach(children, child => { if (isFragment(child)) flatForEachChild(child.props.children, action); else action(child); }); } } const REACT_FRAGMENT = Symbol.for('react.fragment'); export function isFragment(node: React.ReactNode): node is React.ReactElement<{ children: React.ReactNode }> { return (node as any)?.type === REACT_FRAGMENT; } // JavaScript version export function flatForEachChild(children, action) { if (isFragment(children)) { flatForEachChild(children.props.children, action); } else { Children.forEach(children, child => { if (isFragment(child)) flatForEachChild(child.props.children, action); else action(child); }); } } export function flatMapChildren(children, fn) { let results = []; flatForEachChild(children, child => results.push(fn(child))); return results; } const REACT_FRAGMENT = Symbol.for('react.fragment'); export function isFragment(node) { return node != null && node.type === REACT_FRAGMENT; }

React Host 页面为空白页

一切都编译成功，但我的本地主机是一个空白页面，我没有任何问题，但我想知道为什么当我运行 npm start 时，它会将我带到一个新的实时页面，该页面是空白的，但我的 home.jsx...

如何更新Reactjs中redux工具包存储和输入元素中的状态

我正在一个 React 应用程序中工作，它存储使用 redux-saga 从我的后端 api 获取的 redux 存储中的用户信息，并将其显示到输入元素。 我想要的是更新...

React Web 应用程序针对权威服务器进行 PKCE 身份验证

我目前正在致力于使用 Authority 服务器实现基本 React 模板的身份验证。虽然我对 React 有点生疏，但我相信我已经成功集成了所有必要的功能

是否可以将bootstrap类转换为纯css？

我可以将引导类转换为纯CSS吗？ 比如将 'class="container-sm' 转换为普通 css。 我想知道 bootst 中包含“container-sm”类的 CSS...

如何更新模态子组件

我有一个全局模态： 导出 const ModalProvider = ({ 孩子 }: { 孩子: React.ReactNode }) => { const [isModalOpen, setIsModalOpen] = React.useState(false); 常量 [配置，

在 Nextjs 应用程序中渲染普通 javascript 和 html

我有一个包含 javascript 和 html 的文件，类似于下面的内容。我正在尝试在 nextjs 应用程序中渲染它。文件中的代码无法更改为 jsx 以及将呈现它的应用程序...

React 使用 img onerror

我创建了一个图像组件 类 Image 扩展了 React.Component { 使成为（） { 返回 （ ）； } 错误（）{

反应如何以不碰撞的方式改变两个状态？

代码说明：我有两个状态toggleMenu和currentImageIndex（每2秒改变一次，在浏览器中重新渲染图像），图像常量。 每当我尝试切换菜单时...

当从 API 获取的数据发生变化时，如何确保 React 组件重新渲染？

我的应用程序中有一个 React 组件，它从其 componentDidMount 生命周期方法中的 API 获取数据。但是，我还需要确保每当获取时组件都会重新渲染...

如何将 Material UI v5 连接到 Next JS v12？

最近，Material UI 5 发布了。以前（在Material UI 4中），我曾经通过修改_document.js和_app.js来连接它。 Material UI 5 也一样吗？ 对于 MUI v4 _app.js 导入 CssBas...

Reactsj div 在各种浏览器中不居中

我在 React 应用程序中将 div 居中时遇到了麻烦。 jsx代码： 函数加载（）{ 返回 （ 世界你好 ... 我在将 div 居中放置在我的 React 应用程序中时遇到麻烦。 jsx 代码： function Loading() { return ( <div class="loader"> <h1>Hello World</h1> </div> ) } export default Loading CSS（在 public/index.html 内）： .loader { display: flex; justify-content: center; align-items: center; } 我安装了 TailwindCSS 和 DaisyUI。我尝试将 width: 100%; 添加到加载器类，但这也不起作用。我最初在 chrome 上遇到这个问题，然后我在 chrome 和 firefox 上发现了同样的问题。操作系统是 Ubuntu 22.04 LTS。与图像不同，我希望内容位于屏幕中央，而不是粘在顶部： 谢谢您！ 要将 .loader div 置于屏幕中间，您需要确保其父容器覆盖整个视口高度。以下是实现这一目标的方法： import React from 'react'; function Loading() { return ( <div className="flex items-center justify-center h-screen"> <div className="loader"> <h1>Hello World</h1> </div> </div> ); } 导出默认Loading； 如果这不适合您，请告诉我。

TextInput 动态更改值

我有类似的东西： onChangeText={(值) => setValue(值)} important 值是一个全局状态，因为我需要根据一个条件从 API 调用中修改另一个条件的值，

过滤JSON数据并将其映射到Card

大家好 我有以下代码，用于使用 JSON 文件中的数据创建一些日历卡。 从“react-icons/io5”导入{IoLocationSharp}； 从“react-icons/...

当我的React项目与Go Live一起上线时，就会发生这种情况，并且我的项目无法在浏览器上打开[关闭]

当我使用勇敢的浏览器使用 Go Live 打开我的 React 项目时，我不知道为什么实时服务器无法正常工作，并且我不正确理解设置中的 VS Code 中发生了什么...

API 调用后 useNavigate 不起作用

这是我的代码： 导出默认函数 SignUp() { const [user, setUser] = useState({ id: null, 名字: '', 姓氏: '', 电子邮件: '', 密码: '' }); const [isLoading, setIsLoading] =

创建React App内容安全策略被忽略

我尝试将 Auth0 添加到我的应用程序中，该应用程序在本地运行，但当我部署到 S3 存储桶时，出现以下错误： “拒绝连接到‘https://dev-.us.auth0.com/oauth/token’，因为......

将 React SSR 应用程序上传到托管

请告诉我如何将React SSR应用程序上传到托管？我一整天都在寻找正常的文章或说明，但在任何地方都找不到 我有主机和VPS，据我了解，哟...

React Audio Recorder 在 useState 挂钩中为录制的音频返回 null

我正在React中构建一个注册表单，用户可以在其中输入用户名并使用react-audio-voice-recorder库录制音频。我正在使用 useState 挂钩来管理