reactjs 24

반응의 Jquery가 정의되지 않았습니다.

반응의 Jquery가 정의되지 않았습니다. 안녕하세요, 저는 단지 ajax 요청을 받고 싶은데 문제는 jquery가 React에 정의되어 있지 않다는 것입니다.리액트 버전은14.0 에러 메시지 Uncaught ReferenceError: $ is not defined 2개의 파일이 있습니다. index.js import React from 'react'; import { render } from 'react-dom'; import App from './containers/App'; const root = document.getElementById('root'); render( , root ); app.js import React, { Component } from 'react'; export defaul..

programing 2023.04.05

디스패치가 완료될 때까지 리덕스 액션을 기다립니다.

디스패치가 완료될 때까지 리덕스 액션을 기다립니다. 다음 작업 작성자가 있습니다. export function scrolltoNextItem(item) { return (dispatch, getState) => { dispatch(appendItem(Item)); dispatch( scrollToNextIndex( getState().items.length - 1 ) ) } } 문제는 말이다scrollToNextItemappendItem이 종료되기 전에 실행되며 스크롤 위치가 올바르지 않습니다.이것이 사실임을 증명할 수 있습니다.setTimeout스크립트 실행을 실행하기 전에 다음 체크 표시를 기다리도록 합니다.scrollToNextItem: export function scrolltoNextItem(i..

programing 2023.04.05

리액트를 사용하여 html 엔티티를 표시하는 방법

리액트를 사용하여 html 엔티티를 표시하는 방법 cubic html 엔티티(superscript 3)를 표시하고 싶습니다.이렇게 하고 있습니다. const formatArea = function(val){ return val + " ft³"; } 어디에formatArea컴포넌트 내부에서 호출되고 있습니다.' render(){ return ( {formatArea(this.props.area)} ); } 하지만 브라우저에는 다음과 같이 표시됩니다.ft³다른 옵션은 CharCode 메서드에서 사용하는 것입니다. const formatArea = (val) => { return val + ' ft' + String.fromCharCode(179); } React fragment를 사용한 새로운 방법: ³ 고..

programing 2023.04.05

dom-testing-library 또는 react-testing-library에서 입력값을 테스트하는 최선의 방법

dom-testing-library 또는 react-testing-library에서 입력값을 테스트하는 최선의 방법 「 」의 값을 입니까?를 나타내다dom-testing-library/react-testing-library 는, 「Raw Input(로우 입력)」을 입니다.closest()method를 그 、 을 、 the 、 접 、 접 、 접 、 접 the the the the the 에 직접 액세스 할 수 .value★★★★ const input = getByLabelText("Some Label") expect(input.closest("input").value).toEqual("Some Value") HTML 속성에 직접 접속하지 않아도 되는 방법이 있으면 좋겠다고 생각했습니다.그것은 시험 도서관 ..

programing 2023.04.05

Formik의 setError 메서드를 올바르게 사용하는 방법(리액트 라이브러리)

Formik의 setError 메서드를 올바르게 사용하는 방법(리액트 라이브러리) 백엔드와 통신하는 React를 사용하고 있습니다.폼 라이브러리(Form Library)를 제대로 구현하기 위해 노력하고 있습니다. 주요 질문:Formik의 setError 메서드를 올바르게 사용하려면 어떻게 해야 합니까? 클라이언트측의 검증 에러는 올바르게 표시되지만, 현재는 백엔드 검증 에러를 설정/표시하려고 하고 있습니다.백엔드 검증 에러는 상태 코드 400의 응답으로 반환됩니다. 사용하려는 메서드의 문서에 대한 링크 아래 코드에서 handle400Error라는 이름의 메서드를 사용하고 있습니다. My React(및 Formik) 코드: import React, { Component } from "react"; impo..

programing 2023.03.31

React-Select를 프로그래밍 방식으로 지우거나 재설정하는 방법

React-Select를 프로그래밍 방식으로 지우거나 재설정하는 방법 React Select V2와 V3에는 다음과 같은 소품이 몇 개 있는 것 같습니다.clearValue,resetValue그리고.setValue무엇을 시도하든 프로그래밍 방식으로 선택을 지울 수 없습니다. resetValue외부에서는 접근할 수 없는 것 같습니다. selectRef.setValue([], 'clear') // or selectRef.clearValue() 이렇게 해도 현재 선택 항목이 지워지지 않습니다. 여기서 놓치고 있는 것이 있습니까, 아니면 아직 완전히 구현되지 않았습니까?제가 직접 이 문제를 발견했고, 이 문제를 해결했습니다.key선택한 값이 추가된 React-Select 컴포넌트로 이동합니다.이렇게 하면 강제로..

programing 2023.03.31

Airbnb 스타일 가이드는 왜 함수 이름 추론에 의존하지 말라고 하는가?

Airbnb 스타일 가이드는 왜 함수 이름 추론에 의존하지 말라고 하는가? // bad class Listing extends React.Component { render() { return {this.props.hello}; } } // bad (relying on function name inference is discouraged) const Listing = ({ hello }) => ( {hello} ); // good function Listing({ hello }) { return {hello}; } 이것은 Airbnb 리액트 스타일 가이드에서 가져온 것입니다."함수 이름 추론에 의존하는 것이 권장되지 않는 이유"를 설명해 주시겠습니까?그냥 스타일 고민인가요? 또, 이것은, 어나니머스 함수라..

programing 2023.03.26

npm init react-app 사용 시 시작 후 즉시 도커 컨테이너가 빠져나갑니다.

npm init react-app 사용 시 시작 후 즉시 도커 컨테이너가 빠져나갑니다. 리액트 프로젝트로 Docker 컨테이너를 시작하려고 합니다.프로젝트는 npm init react-app을 사용하여 생성됩니다. 이것은 나의 도커 파일입니다. # Specify a base image FROM node:alpine WORKDIR /usr/app # Install some depenendencies COPY ./package.json ./ RUN npm install COPY ./ ./ # Default command CMD ["npm", "run", "start"] Docker build .이미지 생성(많은 npm 경고가 표시됨) 및 실행 시Docker run 이것은 단말기의 출력입니다. > mytest..

programing 2023.03.26

리액트 렌더 함수로 비동기화하는 방법

리액트 렌더 함수로 비동기화하는 방법 저는 이 문제에 대해 잘 알고 있습니다.async await백엔드로nodejs그런데 프런트 엔드로 써야 하는 시나리오가 떠올랐어요. 오브젝트 어레이를 취득하고 그 오브젝트 내에서 취득하는lat lng그 장소들.현재 사용 중react-geocode나는 싱글의 장소 이름을 얻을 수 있다.lat lng지명을 얻기 위해 지도 안에 있는 것을 사용하고 싶습니다.우리가 알고 있는 바로는async사용해야 할 전화async await저기. 여기 코드가 있습니다. import Geocode from "react-geocode"; render = async() => { const { phase, getCompanyUserRidesData } = this.props return ( aw..

programing 2023.03.26

액션 리덕스 후 리액트라우터 리다이렉트

액션 리덕스 후 리액트라우터 리다이렉트 하고 react-redux ★★★★★★★★★★★★★★★★★」react-router액션이 디스패치된 후 리다이렉트해야 합니다. 예를 들어 다음과 같습니다.몇 가지 절차가 있습니다.작업 후: function registerStep1Success(object) { return { type: REGISTER_STEP1_SUCCESS, status: object.status }; } registration Step2의 페이지로 리다이렉트 하고 싶다.이거 어떻게 해? p.s. 기록에서 브라우저 '/registrationStep2'를 방문하지 않았습니다.이 페이지는 결과 등록 Step1 페이지가 성공한 후에만 표시됩니다. 2액션을 마다 React Router 2+를 호출할 수 ..

programing 2023.03.21