반응형

reactjs 13

새로 고침 시 Redux 상태 트리를 유지하려면 어떻게 해야 합니까?

새로 고침 시 Redux 상태 트리를 유지하려면 어떻게 해야 합니까? Redux 문서의 첫 번째 원칙은 다음과 같습니다. 전체 응용 프로그램 상태는 단일 저장소 내의 개체 트리에 저장됩니다. 그리고 저는 사실 모든 원리를 잘 이해한다고 생각했어요.그런데 지금 어플리케이션이 무슨 뜻인지 헷갈려요. 앱이 웹사이트의 작은 복잡한 부분 중 하나일 뿐이고, 한 페이지 안에만 작동한다면 이해할 수 있습니다.하지만 어플리케이션이 웹사이트 전체를 의미한다면?상태 트리를 유지하려면 LocalStorage 또는 쿠키 등을 사용해야 합니까?하지만 브라우저가 LocalStorage를 지원하지 않으면 어떻게 됩니까? 개발자가 상태 트리를 어떻게 유지하는지 알고 싶습니다. :)브라우저 새로 고침 후에도 redux 상태를 유지하려..

programing 2023.04.02

React setState 콜백을 사용하는 경우

React setState 콜백을 사용하는 경우 반응 구성 요소 상태가 변경되면 렌더 메서드가 호출됩니다.따라서 모든 상태 변경에 대해 렌더링 메서드 본문에서 작업을 수행할 수 있습니다.그러면 setState 콜백에 특별한 사용 사례가 있나요?네, 있습니다.setState works works in in in in에서 일하다asynchronous은 즉, 콜을 한 setStatethis.state상태 한 후 이 유용합니다. 아래 예를 참조하십시오. .... changeTitle: function changeTitle (event) { this.setState({ title: event.target.value }); this.validateTitle(); }, validateTitle: function va..

programing 2023.04.02

콘솔에서 리액트 요소의 소품 및 상태를 검사하려면 어떻게 해야 합니까?

콘솔에서 리액트 요소의 소품 및 상태를 검사하려면 어떻게 해야 합니까? React Developer Tools는 React 컴포넌트 트리를 검사하고 소품, 이벤트 핸들러 등을 확인할 수 있는 강력한 기능을 제공합니다.다만, 브라우저 콘솔에서 이러한 데이터 구조를 검사할 수 있도록 하고 싶습니다. 에서는 Chrome을 사용하여 할 수 .$0를 React에서 할 수 있는 $0리액트 개발 툴?사용할 수 있는 React Developer Tools 사용$r선택한 반응 구성 요소에 대한 참조를 가져옵니다. 은 내가 하는 것을 .React Developer Tools요소를 고르다Explorer라는 이름의 .라는 이름의 스테이트 오브젝트가 있습니다.nodeList 「이렇게 하면 」라고 쓸 수 되었습니다$r.state..

programing 2023.04.02

React에서 Link 컴포넌트를 사용할 때 jsx-a11y/anchor-is-valid를 수정하려면 어떻게 해야 합니까?

React에서 Link 컴포넌트를 사용할 때 jsx-a11y/anchor-is-valid를 수정하려면 어떻게 해야 합니까? In a React 앱 Person Link 다음과 같은 eslint 오류가 발생합니다. The href attribute is required on an anchor. Provide a valid, navigable address as the href value jsx-a11y/anchor-is-valid Link 컴포넌트는 유효합니다.href기여하다. Person Link 이 에러의 요점은 무엇입니까?이거 어떻게 고쳐야 돼요? 어떤 도움이라도 주시면 감사하겠습니다!그Link컴포넌트가 생성되다hrefAtribute는 접근성 관점에서 앵커태그가 유효합니다.에 예외를 추가합니다..es..

programing 2023.04.02

React Native Flat List의 List Header Component를 스틱으로 만들려면 어떻게 해야 합니까?

React Native Flat List의 List Header Component를 스틱으로 만들려면 어떻게 해야 합니까? 일부러 화면 폭보다 넓은 Flat List를 가지고 있습니다. 목록은 각 행을 보려면 수직으로 스크롤하고 화면 밖의 항목에 액세스하려면 수평 ScrollView에 위치합니다. ListHeaderComponent 소품은 기본적으로 스프레드시트와 같이 "frozen header"로 동작하고 싶은 x축 라벨입니다. List Header Component 스틱화 방법프로펠러를 설정할 필요가 있습니다.Flatlist~하듯이stickyHeaderIndices={[0]} List Header Component:이 프로포트는 헤더 뷰를FlatList. stickyHeaderIndices={[0]:..

programing 2023.03.28

React/Redux/Typescript 알림 메시지에서 컴포넌트를 자체에서 마운트 해제, 렌더 해제 또는 삭제하는 방법

React/Redux/Typescript 알림 메시지에서 컴포넌트를 자체에서 마운트 해제, 렌더 해제 또는 삭제하는 방법 이 질문은 이미 여러 번 받은 것으로 알고 있습니다만, 대부분의 경우 책임의 흐름은 하강하고 있기 때문에, 이 문제를 부모로부터 처리하는 것이 해결책입니다.그러나 경우에 따라서는 컴포넌트의 메서드 중 하나에서 컴포넌트를 삭제해야 합니다.소품을 수정할 수 없다는 것도 알고 있고, 만약 부울란을 상태로 추가한다면, 단순한 구성 요소치고는 정말 엉망진창이 될 것입니다.여기서 달성하려고 하는 것은 작은 에러 박스 컴포넌트입니다.이 컴포넌트에는, 「x」가 붙어 있습니다.소품에서 에러를 수신하면 표시되지만, 코드에서 닫을 수 있는 방법이 있으면 좋겠습니다. class ErrorBoxCompone..

programing 2023.03.28

React에서 휴식 후 전화를 거는 방법JS 코드?

React에서 휴식 후 전화를 거는 방법JS 코드? React JS와 UI는 처음이라 React에서 간단한 REST 기반 POST 콜을 하는 방법을 알고 싶었습니다.JS 코드 만약 어떤 예가 있다면 그것은 매우 도움이 될 것이다.React Native 문서에서 직접: fetch('https://mywebsite.example/endpoint/', { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', }, body: JSON.stringify({ firstParam: 'yourValue', secondParam: 'yourOtherValue', }) }) (이것은 JSON을 투고하고 있습니다..

programing 2023.03.28

create-react-app index.js 파일을 테스트합니다.

create-react-app index.js 파일을 테스트합니다. 저는 제 프로젝트를 100% 커버하고 싶습니다. 그러기 위해서는 매우 기본적인 index.js 파일을 테스트해야 합니다. index.js import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render(, document.getElementById('root')); 이걸 어떻게 테스트해야 할지 모르겠어요.다음과 같은 함수를 만드는 경우: index.js const index = (div) => { ReactDOM.render(, div || document.getElementById('root')); }; 테스트를 실시합니다. index.test.js it('ren..

programing 2023.03.23

오류: 이 메서드는 단일 노드에서만 실행됩니다.대신 0이 발견됨

오류: 이 메서드는 단일 노드에서만 실행됩니다.대신 0이 발견됨 컴포넌트의 키바인딩 기능을 테스트하고 있습니다.컴포넌트는 비교적 심플한 것으로, Event Listener는keyup컴포넌트를 숨기는 리덕스 액션을 기동합니다. 여기서 코드를 정리한 것은 관련 정보뿐입니다.스토어 디스패치만으로 액션 콜을 실시하면 합격할 수 있지만, 물론 이 테스트의 취지에 어긋납니다.나는 효소를 사용하여 시뮬레이션을 하고 있다.keyup적절한 이벤트 데이터를 포함한 이벤트(키코드)esc)는, 다음의 에러가 발생하고 있습니다. MyComponent.js import React, {Component, PropTypes} from 'react'; import styles from './LoginForm.scss'; import ..

programing 2023.03.23

모든 http 콜에서 디폴트 요구 헤더의 액시오 설정을 작성하려면 어떻게 해야 합니까?

모든 http 콜에서 디폴트 요구 헤더의 액시오 설정을 작성하려면 어떻게 해야 합니까? https://github.com/MrFiniOrg/AxiosQuestion 모든 http 호출에 동일한 요청 헤더를 지정하지 않아도 되도록 프로젝트를 셋업하고 싶습니다. 인터넷에서 검색해 봤지만 프로젝트에서는 이 일을 할 수 없었습니다. 제가 안고 있는 문제를 해결할 수 있도록 누군가 도와주실 수 있을까요?나는 반응과 공리들을 처음 해보는 사람이고 이것을 어떻게 구성해야 할지 잘 모르겠다. 제 프로젝트는 이렇게 하는 것 같은데 요청을 두 번 보냅니다.하나는 머리글이 있고 하나는 머리글이 없습니다. 내 Axios 호출은 app.js 클래스 컴포넌트에서 찾을 수 있습니다.모든 요구에 적용되는 Configuration 기..

programing 2023.03.18
반응형