«reactjs» 태그된 질문

최근에 Expo와 함께 TypeScript를 사용하기 시작했습니다. typescript-eslint코딩하는 동안 대부분의 오류를 잡을 수 있도록 모든 linter / formatter 통합을 수행했습니다 . 코드가 컴파일되는지 확인하기 위해 가끔씩 실행 npx tsc하고 적절하게 수정합니다. 아직 완전히 파악하지 못한 한 가지 이유는 수많은 컴파일 오류가 있어도 앱이 성공적으로 빌드되는 이유입니다. 앱 빌드가 아닌 모든 컴파일 …

15 reactjs  typescript  react-native  expo 

Next.js의 새로운 기능으로 시작 페이지 ( / )에서 / hello-nextjs 로 리디렉션하는 방법이 궁금합니다 . 사용자가 페이지를로드 한 후 path === / / hello-nextjs로 리디렉션 되는지 확인 에서이 반응 라우터 우리가 그런 짓을 : <Switch> <Route path="/hello-nextjs" exact component={HelloNextjs} /> <Redirect to="/hello-nextjs" /> // or <Route path="/" exact render={() => …

15 html  reactjs  routing  react-router  next.js 

URL 매개 변수 (id)를 가져 와서 구성 요소를 추가로 채우는 반응 라우터-라우트를 기반으로 세부 정보보기를로드하려고합니다. 내 경로는 다음과 같이 /task/:idURL에서 : id를 가져 오려고 할 때까지 구성 요소가 제대로로드됩니다. import React from "react"; import { useParams } from "react-router-dom"; class TaskDetail extends React.Component { componentDidMount() { let { id } …

14 reactjs  react-router 

React.forwardRef는 반응 문서에서 하위 기능 구성 요소에 참조를 전달하는 승인 된 방법 인 것으로 보입니다. const FancyButton = React.forwardRef((props, ref) => ( <button ref={ref} className="FancyButton"> {props.children} </button> )); // You can now get a ref directly to the DOM button: const ref = React.createRef(); <FancyButton ref={ref}>Click me!</FancyButton>; 그러나 단순히 맞춤형 …

13 javascript  reactjs  performance 

create-react-app문서에 주어진 명령을 사용 하여 새 프로젝트를 만들려고 npx create-react-app my-app하지만 예를 들어 public srcand와 같은 폴더는 포함되어 있지 않습니다 script.

13 reactjs  create-react-app 

나는 두 가지의 정의를 겪었다. 순수한 함수는 입력을 변경하지 않고 항상 동일한 입력에 대해 동일한 결과를 반환하는 함수입니다. 예 function sum(a, b) { return a + b; } 그리고 Impure 기능은 자체 입력을 변경하는 기능입니다. 예 function withdraw(account, amount) { account.total -= amount; } ReactJs 공식 문서 에서 가져온 정의 …

12 javascript  reactjs  redux 

공유 가능한 React 구성 요소 라이브러리를 작성 중입니다. 라이브러리에는 많은 구성 요소가 포함되어 있지만 최종 사용자는 몇 가지 구성 요소 만 사용해야합니다. 당신이 웹팩 (또는 소포 또는 롤업)와 코드를 묶을 때 그것은 하나 개의 단일 파일 생성 모든 코드를 . 성능상의 이유로 실제로 사용하지 않는 한 브라우저에서 해당 코드를 모두 …

12 reactjs  npm  webpack  es6-modules  rollup 

팝업 ( window.open)을 사용하여 React에서 OAuth를 구현하는 방법에 관심이 있습니다. 예를 들어 mysite.com — 팝업을 여는 곳입니다. passport.mysite.com/oauth/authorize — 팝업. 주요 질문은 window.open(팝업)과 (팝업) 사이의 연결을 만드는 방법입니다. window.opener도메인 간 보안으로 인해 window.opener가 null이므로 더 이상 사용할 수 없습니다. ⇑ window.opener는 (보안상의 이유로) 다른 호스트로 이동 할 때마다 제거, 주위 …

12 javascript  reactjs  oauth  popup  authorization 

Autocomplete입력 태그에 구성 요소 를 사용하고 싶습니다 . 태그를 가져 와서 상태에 저장하여 나중에 데이터베이스에 저장할 수 있습니다. 반응하는 클래스 대신 함수를 사용하고 있습니다. 나는으로 시도 onChange했지만 결과를 얻지 못했습니다. <div style={{ width: 500 }}> <Autocomplete multiple options={autoComplete} filterSelectedOptions getOptionLabel={option => option.tags} renderInput={params => (<TextField className={classes.input} {...params} variant="outlined" placeholder="Favorites" margin="normal" …

12 reactjs  material-ui 

반응 후크는 우리에게 useState 옵션을 제공하며 항상 후크 대 클래스 상태 비교를 봅니다. 그러나 후크와 일부 정규 변수는 어떻습니까? 예를 들어 function Foo() { let a = 0; a = 1; return <div>{a}</div>; } 나는 Hooks를 사용하지 않았으며 다음과 같은 결과를 얻을 것이다. function Foo() { const [a, setA] = …

12 javascript  node.js  reactjs  react-hooks 

이것은 onClickdiv 의 경로를 변경하기 위해 인라인 화살표 기능을 사용하는 구성 요소 이지만 성능면에서 좋은 방법은 아니라는 것을 알고 있습니다 1. 인라인 화살표 기능 changeRoute (routeName) { console.log(routeName) } render() { return ( <> <div onClick={() => this.changeRoute("page1")}>1</div> <div onClick={() => this.changeRoute("page2")}>2</div> </> ) } 2. 생성자 바인딩을 사용하는 경우 …

11 javascript  reactjs 

경고 구성 요소를 사용하기 위해 material-ui / lab을 설치했지만 가져올 때마다 import Alert from '@material-ui/lab/Alert';컴파일하지 않고이 오류가 발생합니다. ./node_modules/@material-ui/lab/esm/internal/svg-icons/SuccessOutlined.js Attempted import error: 'createSvgIcon' is not exported from '@material-ui/core/utils'. 그래서이 문제를 Google에 시도하고 material-ui/lab/AutoComplete구성 요소 에 대한 다른 질문 ( 이 질문은 정확히 )을 발견했으며 허용되는 답변은 material-ui / core를 버전 …

11 javascript  node.js  reactjs  material-ui 

브라우저에서 프로젝트를 실행할 때 다음 오류가 발생했습니다. 컴파일하지 못했습니다 : ./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'; …

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() { …

11 javascript  reactjs  typescript 

TL; DR 부모 구성 요소는 그 아래의 모든 자식 구성 요소 렌더링이 완료되고 DOM이 최신 버전으로 사용자에게 표시되는 시점을 어떻게 알 수 있습니까? 손자 구성 요소로 구성된 component A자식 Grid구성 요소 가 있다고 가정 해 봅시다 3x3. 각 손자 구성 요소는 편안한 API 끝점에서 데이터를 가져오고 데이터를 사용할 수있게되면 자체적으로 …

11 reactjs