Questions tagged «reactjs»

在浏览器上运行项目时出现以下错误： 编译失败： ./node_modules/@material-ui/lab/esm/internal/svg-icons/Close.js Attempted import error: 'createSvgIcon' is not exported from '@material-ui/core/utils'. 我正在尝试实现自动完成组件（从“多个值”部分的示例中）。 这是我正在使用的代码： import React from 'react'; import Chip from '@material-ui/core/Chip'; import Autocomplete from '@material-ui/lab/Autocomplete'; import TextField from '@material-ui/core/TextField'; <Autocomplete multiple id="tags-standard" options={top100Films} getOptionLabel={(option) => option.title} defaultValue={[top100Films[13]]} renderInput={(params) => ( <TextField {...params} variant="standard" label="Multiple values" placeholder="Favorites" /> )} /> …

11 reactjs  typescript  material-ui 

我<If />使用React 创建了一个简单的功能组件： import React, { ReactElement } from "react"; interface Props { condition: boolean; comment?: any; } export function If(props: React.PropsWithChildren<Props>): ReactElement | null { if (props.condition) { return <>{props.children}</>; } return null; } 它使我可以编写更简洁的代码，例如： render() { ... <If condition={truthy}> presnet if truthy </If> ... 在大多数情况下，它工作良好，但是当我想检查例如是否未定义给定变量然后将其作为属性传递时，这便成为问题。我举一个例子： 假设我有一个名为的组件<Animal />，它具有以下属性： interface …

11 javascript  reactjs  typescript 

TL; DR 父组件如何知道其下的每个子组件的渲染何时完成以及用户使用其最新版本的DOM可见？ 假设我有一个component A具有Grid由3x3孙组件组成的子组件的。这些孙子组件中的每个子组件都从宁静的API端点获取数据，并在数据可用时进行呈现。 我想Component A用一个loader占位符覆盖整个区域，仅当网格中的最后一个组件成功获取数据并呈现它，使得它已经在DOM上并且可以查看时才公开。 用户体验应该是从“加载程序”到完全填充的网格的超平滑过渡，而不会闪烁。 我的问题是确切知道何时在加载程序下发布组件。 我可以依靠任何机制绝对准确地做到这一点吗？我不对加载程序的时间进行硬编码。据我了解，ComponentDidMount对每个孩子的依赖也是不可靠的，因为它实际上并不能保证在通话时该组件对用户完全可见。 为了进一步提炼问题： 我有一个呈现某种数据的组件。初始化后就没有它了，因此它componentDidMount会命中一个API端点。一旦接收到数据，它就会更改其状态以反映它。可以理解的是，这将导致该组件的最终状态重新呈现。我的问题是：如何知道重新渲染何时发生并反映在面向用户的DOM中。该时间点=组件状态已更改为包含数据的时间点。

11 reactjs 

盖伊我面临一个问题。我有一个二维数据。数据具有包含链接的嵌套结构。 const data = [ // First Div Panel [ { id: 1, url: "/services", title: "Services" }, { id: 2, title: "Products", children: [ { id: 3, url: "/themes-templates", title: "Themes & Templates" }, { id: 4, url: "/open-source", title: "Open Source" }, { id: 5, url: "/solutions", title: …

11 reactjs 

我正在构建一个React单页应用程序，并且我注意到滚动恢复似乎无法在Chrome（可能还有其他浏览器）中按预期工作。 在react-router-dom github repo上，他们有一个页面说浏览器开始本地处理单页面应用程序的滚动，并且如果history.scrollRestoration设置为，则行为将类似于传统的非SPA网页。auto。 该页面上显示了我需要的行为： 向上滚动导航，这样就不会启动滚动到底部的新屏幕。 恢复窗口的滚动位置和“后退”和“前进”单击上的溢出元素（但不单击“链接”单击！） 但是我还需要禁用包含选项卡或轮播的路由的行为。 这是Chrome关于此问题的规范的链接。 我在适用于OS X的Chrome版本78.0.3904.97（正式版本）（64位）中观察到的内容似乎是我期望的history.scrollRestoration manual设置。也就是说，当我向下滚动页面一半并单击链接时，下一页向下滚动到页面中间，与上一页相同。 我history.scrollRestoration在各个地方检查了，发现它开始并保持auto为默认状态， 这里的一个重要意义来自@TrevorRobinson的回答：“浏览器自动进行滚动还原的尝试... ...大多数不适用于单页面应用程序...”好的...我发现对的一致支持history.scrollRestoration，但是显然，浏览器在实际进行滚动还原时很cr脚。那应该在这里指出，这今天可以节省我的时间。 然后，我寻找手动执行此操作的方法，但不清楚前进的方向。react-router-scroll说它与React Router v4不兼容，但是没有提到v5，这是当前的问题。那么我应该假设v5也不兼容吗？ 因此，我进一步寻找前进的方向，并找到了有关如何使用React Router v4处理滚动还原的 SO答案...我是否应该认为这将适用于React Router v5？更新：在v5中似乎不适用于我。我尝试了几种配置。我也无法使其完全与React Router v4一起使用。我知道它至少还活着，因为它滚动到新页面的顶部，但是历史记录未恢复。 我也确实可以使用react-router-scroll-memory，但是它没有用于禁用在指定路线上滚动的选项，例如选项卡或轮播所需的选项……我可能会对其进行破解。 我考虑过使用oaf-react-router，但是在文档中没有对禁用某些路由的滚动恢复或从上到下滚动进行任何说明。编辑：它确实处理了此问题，如我的回答所述。 有什么我忽略的东西吗？解决此问题的标准是什么，因为我不是唯一需要此功能的人。似乎我在做一些前卫和实验性的工作，但我只需要让自己的网站像普通网站一样滚动即可。

11 javascript  reactjs  google-chrome  react-router 

我有一个使用TypeScript，Jest，Webpack和Babel构建的React应用程序（不使用Create React App）。尝试运行“ yarn jest”时，出现以下错误： 我尝试删除所有软件包并重新添加它们。它不能解决此问题。我看过类似的问题和文档，但仍然有些误解。我什至遵循了另一本从头开始设置此环境的指南，但我的代码仍然收到此问题。 依赖项包括... "dependencies": { "@babel/plugin-transform-runtime": "^7.6.2", "@babel/polyfill": "^7.6.0", "babel-jest": "^24.9.0", "react": "^16.8.6", "react-dom": "^16.8.6", "react-test-renderer": "^16.11.0", "source-map-loader": "^0.2.4" }, "devDependencies": { "@babel/core": "^7.6.0", "@babel/preset-env": "^7.6.0", "@babel/preset-react": "^7.0.0", "@types/enzyme": "^3.9.2", "@types/enzyme-adapter-react-16": "^1.0.5", "@types/jest": "^24.0.13", 组件的导入行... import * as React from "react"; import { BrowserRouter as Router, …

11 reactjs  jestjs  babeljs  babel-jest  ts-jest 

我想了解使用React-Redux进行错误处理的更通用或更正确的方法。 假设我有电话号码注册组件。 如果输入的电话号码无效，该组件将引发错误提示 处理该错误的最佳方法是什么？ 想法1： 创建一个组件，该组件接受错误并在将错误传递给它时调度一个操作 想法2： 由于错误与该组件相关，请将错误传递给组件（该组件未连接到redux，即错误处理程序组件将不会分派操作） 问题：有人可以指导我在React-Redux中针对大型应用程序进行错误处理的正确方法吗？

11 reactjs  redux 

我将在我的项目中设计一个抽屉导航。 我通过以下命令安装了该命令： npm install @react-navigation/drawer 然后将其导入 App.js import { createDrawerNavigator } from '@react-navigation/drawer'; import { NavigationContainer } from '@react-navigation/native'; 这是我的package.json内容： "@react-native-community/masked-view": "^0.1.6", "@react-navigation/drawer": "^5.0.0", "react": "16.9.0", "react-native": "0.61.5", "react-native-gesture-handler": "^1.5.6", "react-native-reanimated": "^1.7.0", "react-native-screens": "^2.0.0-beta.1", "react-native-view-shot": "^3.0.2", "react-navigation": "^4.1.1", "react-navigation-stack": "^2.1.0", 这是我的App.js内容： const App = () => { const Drawer = …

10 reactjs  react-native  navigation-drawer  react-navigation 

我试图深入了解这个useEffect钩子。 我想知道何时使用哪种方法，为什么使用？ 1.useEffect with no second paraments useEffect(()=>{}) 2.useEffect with second paraments as [] useEffect(()=>{},[]) 3.useEffect with some arguments passed in the second parameter useEffect(()=>{},[arg])

10 javascript  reactjs  react-redux 

我遇到一种情况，我需要在页面呈现到服务器端并使用Next.js发送回我之前，先了解用户是否已登录，以避免UI中出现闪烁变化。 我能够弄清楚如果用户已经使用此HOC组件登录，如何防止用户访问某些页面... export const noAuthenticatedAllowed = (WrappedComponent: NextPage) => { const Wrapper = (props: any) => { return <WrappedComponent {...props} />; }; Wrapper.getInitialProps = async (ctx: NextPageContext) => { let context = {}; const { AppToken } = nextCookie(ctx); if (AppToken) { const decodedToken: MetadataObj = jwt_decode(AppToken); const isExpired = …

10 javascript  reactjs  typescript  next.js 

我正在从我的外部（node_modules）模式库中渲染组件。在主应用程序中，我将Link实例从实例传递react-router-dom到外部库的组件中，如下所示： import { Link } from 'react-router-dom'; import { Heading } from 'my-external-library'; const articleWithLinkProps = { url: `/article/${article.slug}`, routerLink: Link, }; <Heading withLinkProps={articleWithLinkProps} /> 在我的库中，它呈现Link为： const RouterLink = withLinkProps.routerLink; <RouterLink to={withLinkProps.url} > {props.children} </RouterLink> 在RouterLink似乎正确渲染，甚至在单击时浏览到的URL。 我的问题是，RouterLink似乎已与我的App react-router-dom实例分离。当我单击时Heading，它会“艰难”地导航，回发页面，而不是像Link往常那样无缝地路由到那里。 我不确定目前要尝试什么以使其无缝导航。任何帮助或建议，将不胜感激，在此先感谢您。 编辑：显示我的路由器的设置方式。 import React from 'react'; import { hydrate, unmountComponentAtNode } from …

10 javascript  reactjs  react-router-dom 

我正在尝试模仿其他移动聊天应用程序，在这些应用程序中，当您选择send-message文本框并打开虚拟键盘时，最底部的消息仍在显示中。似乎没有办法用CSS来做到这一点，所以JavaScript resize（显然是找出何时打开和关闭键盘的唯一方法）是事件和手动滚动以进行救援。 有人提供了这个解决方案，我发现了这个解决方案，两者似乎都可以工作。 除了一种情况。出于某种原因，如果您位于MOBILE_KEYBOARD_HEIGHT消息div底部（在我的情况下为250像素）以内，则当您关闭移动键盘时，会发生一些奇怪的情况。使用前一种解决方案，它会滚动到底部。使用后一种解决方案时，它会MOBILE_KEYBOARD_HEIGHT从底部向上滚动像素。 如果滚动到该高度以上，则上面提供的两个解决方案都可以正常工作。只有当您接近底部时，他们才会遇到这个小问题。 我以为可能只是我的程序导致了一些奇怪的流浪代码，但不，我什至重现了一个小提琴，它确实有这个问题。我很抱歉使调试变得如此困难，但是如果您在手机上访问https://jsfiddle.net/t596hy8d/6/show（显示后缀提供全屏模式），您应该可以看到同样的行为。 如果您向上滚动足够，打开和关闭键盘将保持该位置。但是，如果将键盘关闭在MOBILE_KEYBOARD_HEIGHT底部像素以内，则会发现它滚动到底部。 是什么原因造成的？ 这里的代码复制： window.onload = function(e){ document.querySelector(".messages").scrollTop = 10000; bottomScroller(document.querySelector(".messages")); } function bottomScroller(scroller) { let scrollBottom = scroller.scrollHeight - scroller.scrollTop - scroller.clientHeight; scroller.addEventListener('scroll', () => { scrollBottom = scroller.scrollHeight - scroller.scrollTop - scroller.clientHeight; }); window.addEventListener('resize', () => { scroller.scrollTop = scroller.scrollHeight - scrollBottom - …

10 javascript  android  html  css  reactjs 

我试图弄清楚如何获取用户名，该用户名是存储在用户集中的属性，该用户集中已与firebase身份验证模型创建的属性合并。 我可以访问authUser-在身份验证工具中为firebase提供了有限的字段，然后尝试从那里转到相关的用户集合（使用相同的uid）。 我有一个反应上下文使用者： import React from 'react'; const AuthUserContext = React.createContext(null); export default AuthUserContext; 然后在我的组件中尝试使用： const Test = () => ( <AuthUserContext.Consumer> {authUser => ( <div> {authUser.email} // I can access the attributes in the authentication collection {authUser.uid.user.name} //i cannot find a way to get the details in the related …

10 reactjs  firebase  google-cloud-firestore  firebase-authentication 

我一直在努力解决这个问题，但没有找到一个强有力的答案。我正在尝试使用useMutation挂钩执行登录突变。 TLDR；我想知道传入的onError选项与useMutation给我的错误之间到底有什么区别 这是我的代码段 const [login, { data, loading, error }] = useMutation(LOGIN_QUERY, { variables: { email, password }, onError(err) { console.log(err); }, }); 在服务器端，我有一个用于登录的预设/硬编码电子邮件，并且我没有使用Apollo或任何其他客户端。在此登录突变的解析器中，如果使用的电子邮件不相同，我只会抛出一个错误 throw new Error('Invalid Email'); 现在，我想在客户端上处理此错误（反应）。但是我担心的是，如果我使用useMutation钩子返回的“错误”并尝试以这种方式显示错误 render() { ... {error && <div> Error occured </div>} ... } 该错误已在UI中更新，但随后React迅速向我显示了一个屏幕，显示未处理的拒绝（错误）：Graphql错误：My-custom-error-message 但是，如果我使用onError传递给useMutate函数的选项，那么它不会向我显示此屏幕，并且我可以对错误进行任何处理。 我想知道究竟是由useMutation给我？为什么做出反应告诉我，错误画面时onError的选项和错误通过的onError之间的差异不使用。 谢谢！

10 reactjs  graphql  react-apollo  apollo-client 

当用户尝试在我的网站上使用google进行注册时，Google会向用户显示上述3个弹出窗口，但是当我尝试进行注册时，不会向我显示相同的弹出窗口。我看到的就是这个- 这3个单独的弹出式窗口正导致我的网站大量下架。如何删除这3个不同的权限弹出窗口？ Google登录按钮详细信息-使用React Google登录 <div className="manager-signup-container"> <div className="content">Join Peoplebox as a Manager to have productive 1:1s that drive actions.</div> <GoogleLogin className={`google-btn-${this.state.loginbtnStatus}`} clientId={GOOGLE_CLIENT_ID} buttonText="Sign up with Google" onSuccess={(response) => this.responseOauth(response, "google")} onFailure={this.responseGoogleFail} responseType="code" scope="profile email https://www.googleapis.com/auth/calendar.events https://www.googleapis.com/auth/calendar.readonly" accessType="offline" prompt="consent" disabled={this.state.loginDisabled} />

10 reactjs  google-calendar-api  google-signin  google-apps  google-login