반응형

reactjs 31

use Selector의 파괴와 여러 콜의 파괴

use Selector의 파괴와 여러 콜의 파괴 최근에 react-displex docs https://react-redux.js.org/next/api/hooks를 읽고 있었는데, Equality Comparison and Updates 관련 섹션이 있었습니다.이 섹션에는 다음과 같은 내용이 있습니다. use Selector()를 여러 번 호출하여 각 호출이 단일 필드 값을 반환합니다. 첫 번째 접근법: const { open, importId, importProgress } = useSelector((importApp) => importApp.productsImport); 두 번째 접근법: const open = useSelector((importApp) => importApp.productsImpo..

IT 2023.03.04

React Js Es 6을 사용한 스타일의 삼원 연산자

React Js Es 6을 사용한 스타일의 삼원 연산자 다음 3원 연산자를 추가하여 로그인 시 및 숨기지 않을 경우 버튼을 표시하려고 합니다.아래가 자꾸 오류를 일으킵니다. 스타일 속성에 제공하는 것은 객체여야 합니다.곱슬 괄호 사이에 js 코드를 jsx로 쓰기 때문에 오브젝트를 삽입합니다. casel case는 casel case의 모든 소품이어야 합니다.(글꼴 크기==>글꼴 크기) 또는 3진수는 다음과 같습니다. style={isLoggedIn ? { display:'block' } : { display:'none' }} 상표를 삭제합니다(전제로 동작합니다).isLoggedInboolean-ish) 입니다.스타일을 인라인으로 표시하는 대신 styles const 아래에 있는 값을 사용하는 것이 좋습니..

IT 2023.02.27

getDerivedStateFromProps가 setState 뒤에 호출되는 이유는 무엇입니까?

getDerivedStateFromProps가 setState 뒤에 호출되는 이유는 무엇입니까? 리액션이 새로운 정적 방법을 도입했습니다.getDerivedStateFromProps(props, state)모든 렌더링 방법 전에 호출됩니다만, 그 이유는 무엇입니까?소품 교환 후에 전화하는 것은 말이 되지만, 그 후에setState그렇지 않아, 내가 뭔가 놓치고 있는 것 같아. 작성했습니다.datePicker회사 요건에 따라 컴포넌트 날짜는 프로펠러에서 관리합니다.컴포넌트의 상태는 다음과 같습니다. selectedDate: number; selectedMonth: number; selectedYear: number; currentMonth: number; currentYear: number; view: s..

IT 2023.02.27

eslint의 이 'react/no-un-escape-Entitie' 위반을 어떻게 해결할 것인가?

eslint의 이 'react/no-un-escape-Entitie' 위반을 어떻게 해결할 것인가? 코드는 다음과 같습니다. const func = () => { return ( you're free )} 왠지 eslint가 에러로 "You're free" 라인에 플래그를 붙인다.error HTML entities must be escaped react/no-unescaped-entities 그러나 내가 볼 때 jsx는 이미 아포스트로피를 벗어났다.나는 그 말을 볼 수 있다.you're free문제없이 렌더링됩니다.만약 내가 그것을 벗어나면'이 경우 스트링을 검색하기가 매우 어려워집니다(예상으로는you're free에디터에서 히트곡으로 돌려보내는 거죠하지만 편집자가 놓칠 게 분명해 왜냐하면 텍스트..

IT 2023.02.27

반응: 정적 propType이 필요한 이유

반응: 정적 propType이 필요한 이유 나는 redex tomvc 코드를 찾고 있다.이 뭐죠?static키워드static propTypes?static는 이전 세대의 Javascript("ES5")의 일부가 아니기 때문에 이전 문서에서는 찾을 수 없습니다.그러나 이제 Internet Explorer(http://caniuse.com/#search=es6)를 제외한 모든 주요 브라우저에서 ES6 클래스 구문이 지원되며, Babel과 같은 트랜스필러를 사용하면 모든 브라우저에서 사용할 수 있습니다.대부분의 React 사용자는 이미 Babel을 사용하여 JSX를 변환하고 있기 때문에 React 사이트(Redux TodoMVC 등)는 이를 당연하게 여긴다.에 대한 자세한 내용을 참조해 주세요.staticht..

IT 2023.02.22

react-testing-library - 화면과 렌더 쿼리

react-testing-library - 화면과 렌더 쿼리 를 사용하여 쿼리를 사용하는 방법에는 두 가지가 있습니다. 메서드에 의해 반환된 쿼리를 사용할 수 있습니다. import React from 'react' import { render } from '@testing-library/react' ... const { getByText } = render(Foo) expect(getByText('Foo')).toBeInTheDocument() 또는 개체를 사용할 수 있습니다. import React from 'react' import { render, screen } from '@testing-library/react' ... render(Foo) expect(screen.getByText('Foo'..

IT 2023.02.22

Redux와 릴레이의 차이점

Redux와 릴레이의 차이점 redex와 relay를 기반으로 문서/문서 수를 읽었는데 이 두 라이브러리가 어떻게 다른지 혼란스럽네요. 이 두 라이브러리의 장점과 단점은 무엇입니까? "GraphQL" "GraphQL" "GraphQL" 이요? CRM/ERP와 같은 엔터프라이즈 데이터 기반 애플리케이션에 적합한 라이브러리는 무엇입니까?둘 다 애플리케이션 상태를 관리하기 위한 Facebook 프레임워크인 Flux 구현입니다. Redx: 응용 프로그램에서 상태 관리를 처리하는 데 도움이 되는 일반적인 Javascript 라이브러리입니다.Redx는 반응에 의존하지 않으며 모든 라이브러리에서 사용할 수 있습니다.그react-redux리덕스되어 각 할 수 actionsredox를 .Redux는 개봉 즉시 데이터를 ..

IT 2023.02.22

구성 요소를 JSX 구성 요소로 사용할 수 없습니다.반환 형식 'Element[]'는 올바른 JSX 요소가 아닙니다.

구성 요소를 JSX 구성 요소로 사용할 수 없습니다.반환 형식 'Element[]'는 올바른 JSX 요소가 아닙니다. 이 에러에 대해서 다음과 같은 에러가 발생하고 .Todos TodoApp.tsx ' 요소로 할 수 'Todos' JSX는 JSX를 사용합니다.Element [ ] xx JSX 소xx 。[]' 유형, 'Element[]' 유형에서 다음 . 'Element'는 'Element'를 'Element'로 하다. 그리고 이것은 나의 폴더 구조이다. TodoApp.tsx function TodoApp() { return ( ); } Todos.tsx function Todos(): JSX.Element[] { const todos = useSelector((state: RootState) => sta..

IT 2023.02.18

가치와 같은 이름의 리액트 소품

가치와 같은 이름의 리액트 소품 이름과 값이 같은 컴포넌트에 소품을 암묵적으로 전달할 수 있습니까? 예:예를 들어 다음과 같은 변수가 있다고 가정해 봅시다.x:const x = 1; 그리고 나는 소품이라는 소품을 가진 컴포넌트를 가지고 있다.x이 변수를 암묵적으로 값으로 전달할 수 있습니까?다음과 같이 합니다.?@Ajay도 코멘트에서 지적했듯이 Booan은 컴포넌트에 암묵적으로 전달될 수 있습니다. 이 값은 기본적으로는 단, 변수가 부울이 아닌 경우에는 다음과 같이 작성해야 합니다. 아니면 그런 소품들이 많으면 이런 걸 만들 수 있어요. const cmpProps = { x, y, foo, bar } 다음과 같은 분산 속성을 사용하여 전달합니다. 나는 이 답들을 읽을 때 약간의 깨달음을 얻었다.ES6+에..

IT 2023.02.14

React.memo 구문 문제 대신 useMemo 사용

React.memo 구문 문제 대신 useMemo 사용 리액트 훅 useMemo를 사용하는 데모를 해야 합니다.작업 코드는 다음과 같습니다. const SpeakerCardDetail = React.memo( ({id,... 이와 같은 구문을 사용할 수 있다는 링크를 찾았는데 정확히 알 수 없습니다. 이게 내가 아는 전부야 const SpeakerDetail = React.useMemo(() => { ({ id, 하지만 확실히 그건 아니야.React.memo가 문제를 해결한다는 것은 알지만 useMemo를 행동으로 보여줘야 하기 때문에 다른 구문을 사용할 수 있기를 바랍니다.React.memo ★★★★★★★★★★★★★★★★★」React.useMemo는 전혀 동일하지 않습니다(이름의 유사성에 의존하지 마십..

IT 2023.02.14
반응형