«reactjs» 태그된 질문

가이가 문제에 직면하고 있습니다. 2 차원 데이터가 있습니다. 데이터에는 링크가 포함 된 중첩 구조가 있습니다. const data = [ // First Div Panel [ { id: 1, url: "/services", title: "Services" }, { id: 2, title: "Products", children: [ { id: 3, url: "/themes-templates", title: "Themes & Templates" }, { …

11 reactjs 

React 단일 페이지 응용 프로그램을 구축 중이며 Chrome 및 기타 브라우저에서 스크롤 복원이 예상대로 작동하지 않는 것으로 나타났습니다. (가) github에 REPO 라우터-DOM 반응에, 그들은 브라우저가되는 것을 말한다 페이지가 스크롤 기본적으로 핸들에 시작하는 경우, 단일 페이지 응용 프로그램에 대한, 그리고 행동이 기존의 비 SPA 웹 페이지와 유사한 것 history.scrollRestoration으로 설정을 auto. …

11 javascript  reactjs  google-chrome  react-router 

TypeScript, Jest, Webpack 및 Babel을 사용하여 작성된 React 응용 프로그램 (Create React App을 사용하지 않음)이 있습니다. "yarn jest"를 실행하려고하면 다음 오류가 발생합니다. 모든 패키지를 제거하고 다시 추가하려고했습니다. 이 문제는 해결되지 않습니다. 비슷한 질문과 문서를 보았지만 여전히 오해하고 있습니다. 나는이 환경을 처음부터 새로 설정하기위한 다른 가이드를 따르고 여전히 내 코드 로이 …

11 reactjs  jestjs  babeljs  babel-jest  ts-jest 

React-Redux를 사용하는 것이 더 일반적이거나 올바른 오류 처리 방법을 이해하고 싶습니다. 전화 번호 가입 구성 요소가 있다고 가정합니다. 입력 전화 번호가 유효하지 않은 경우 구성 요소에서 오류가 발생합니다 그 오류를 처리하는 가장 좋은 방법은 무엇입니까? 아이디어 1 : 오류가 발생하여 오류가 전달 될 때마다 작업을 전달하는 구성 요소 만들기 아이디어 …

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", 이것은 내 …

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 

UI에서 깜박임이 발생하지 않도록 페이지가 서버 측으로 렌더링되고 Next.js를 사용하여 나에게 다시 전송되기 전에 사용자가 로그인했는지 여부를 알아야하는 경우가 있습니다. 이 HOC 구성 요소를 사용하여 이미 로그인 한 경우 사용자가 일부 페이지에 액세스하지 못하게하는 방법을 알아낼 수있었습니다 ... export const noAuthenticatedAllowed = (WrappedComponent: NextPage) => { const Wrapper = (props: …

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과 같이 렌더링합니다 . …

10 javascript  reactjs  react-router-dom 

send-message텍스트 상자 를 선택 하고 가상 키보드를 열 때 가장 아래쪽 메시지가 여전히 표시 되는 다른 모바일 채팅 앱을 모방하려고합니다 . CSS로 놀랍게도 그렇게 할 수있는 방법이없는 것 같습니다. 따라서 JavaScript resize(키보드가 열리고 닫히는 시점을 알 수있는 방법 만) 이벤트와 수동으로 구조를 스크롤합니다. 누군가가 제공하는 이 솔루션을 나는 발견 이 …

10 javascript  android  html  css  reactjs 

Firebase 인증 모델로 생성 된 속성과 병합 된 사용자 모음에 저장된 속성 인 사용자 이름을 얻는 방법을 알아 내려고합니다. authUser에 액세스 할 수 있습니다. 인증 도구에서 firebase가 수집하는 제한된 필드를 제공하고 거기에서 관련 사용자 컬렉션 (같은 uid를 사용)으로 이동하려고합니다. 다음과 같은 반응 컨텍스트 소비자가 있습니다. import React from 'react'; const …

10 reactjs  firebase  google-cloud-firestore  firebase-authentication 

나는이 문제를 해결하려고 노력했지만 그에 대한 강력한 대답을 찾지 못했습니다. useMutation 후크를 사용하여 로그인 돌연변이를 실행하려고합니다. TLDR; 옵션에 전달 된 onError와 useMutation에 의해 나에게 주어진 오류의 차이점이 정확히 무엇인지 알고 싶습니다. 여기 내 코드 스 니펫이 있습니다. const [login, { data, loading, error }] = useMutation(LOGIN_QUERY, { variables: { email, …

10 reactjs  graphql  react-apollo  apollo-client 

Google은 사용자가 내 웹 사이트에서 Google을 사용하여 가입하려고 할 때 위의 3 가지 팝업을 사용자에게 표시하지만 가입하려고 할 때 동일한 팝업이 표시되지 않습니다. 내가 보는 것은 이것입니다- 이 3 개의 별도 팝업으로 인해 내 웹 사이트에서 큰 차이가 발생합니다. 이 3 가지 권한 팝업을 어떻게 제거 할 수 있습니까? Google …

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

ReactSwipableView 패키지를 사용하는 Material ui SwipeableViews를 사용하고 있는데 콘솔 에서이 오류가 발생합니다. react-dom.development.js : 12466 경고 : componentWillReceiveProps의 이름이 바뀌 었으므로 사용하지 않는 것이 좋습니다. 자세한 내용을 참조하십시오. 데이터 페치 코드 또는 부작용을 componentDidUpdate로 이동하십시오. 소품이 바뀔 때마다 상태를 업데이트하는 경우 코드를 리팩토링하여 메모 기술을 사용하거나 정적 getDerivedStateFromProps로 이동하십시오. 자세한 …

10 reactjs 

반응 앱에 Firestore 타임 스탬프를 표시하는 방법을 알아 내려고합니다. createdAt라는 필드가있는 firestore 문서가 있습니다. 출력 목록에 포함하려고합니다 (전체 필드 목록을 읽을 필요가 없도록 여기에서 관련 비트를 추출). componentDidMount() { this.setState({ loading: true }); this.unsubscribe = this.props.firebase .users() .onSnapshot(snapshot => { let users = []; snapshot.forEach(doc => users.push({ ...doc.data(), uid: doc.id …

10 javascript  reactjs  firebase  google-cloud-firestore  unix-timestamp 

Nginx 및 NodeJS 서버와 함께 Gzip 전달을 사용하여 Next.js로 작성된 코드를 압축하려고합니다. curl -H "Content-Encoding: gzip"확인에 사용할 때 구성이 작동하는 것 같습니다 . 그러나 실제 브라우저 (Chrome, Firefox)를 사용하면 Content-Encoding: gzip응답 헤더 에서 속성을 찾을 수 없습니다 . 대신에 X-Content-Encoding-Over-Network: gzip나타납니다. Google Lighthouse를 사용하여 사이트를 테스트하지만 텍스트 파일에서 압축을 활성화한다고 …

10 node.js  reactjs  nginx  gzip  next.js