반응형

reactjs 25

소품 파괴 할당(반응/파괴-할당)을 사용해야 합니다.

소품 파괴 할당(반응/파괴-할당)을 사용해야 합니다. eslint Airbnb standard를 코드에 적용했으므로, 이 코드는 다음과 같습니다. handleSubmit = (event) => { event.preventDefault(); this.props.onSearch(this.query.value); event.target.blur(); } 는 다음 오류를 일으킵니다. [eslint] 소품 파괴 할당(리액트/파괴 할당)을 사용해야 합니다. onSearch기본적으로 부모 컴포넌트에 값을 전달하는 트리거입니다. eslint 요건을 충족하기 위해 이 코드를 리팩터링하려면 어떻게 해야 합니까?handleSubmit = (event) => { event.preventDefault(); const {onSe..

programing 2023.03.14

Yup에서의 조건부 검증

Yup에서의 조건부 검증 확인란이 선택되어 있는 경우에만 표시되는 이메일 필드가 있습니다(부울 값은true폼이 송신되었을 때, 체크 박스가 온이 되어 있는 경우(부울란은 true). 지금까지 제가 시도한 것은 다음과 같습니다. const validationSchema = yup.object().shape({ email: yup .string() .email() .label('Email') .when('showEmail', { is: true, then: yup.string().required('Must enter email address'), }), }) 그 밖에도 몇 가지 변형을 시도했지만 Formik과 Yup에서 오류가 발생했습니다. Uncaught (in promise) TypeError: Cann..

programing 2023.03.14

반응: 입력 값이 상태별로 변경되는 경우 onChange를 트리거합니까?

반응: 입력 값이 상태별로 변경되는 경우 onChange를 트리거합니까? 편집: 버튼을 클릭한 경우에만 handleChange를 호출하지 않습니다.handle Click과는 관계가 없습니다.@shubhakhatri 답변의 코멘트에서 예를 들었습니다. 상태에 따라 입력 값을 변경하고 싶은데 값이 변경되지만 트리거되지 않습니다.handleChange()방법.트리거 방법handleChange()방법? class App extends React.Component { constructor(props) { super(props) this.state = { value: 'random text' } } handleChange (e) { console.log('handle change called') } handleCl..

programing 2023.03.09

토큰을 쿠키, 로컬 스토리지 또는 세션에 저장해야 합니까?

토큰을 쿠키, 로컬 스토리지 또는 세션에 저장해야 합니까? React SPA, Express, Express-session, Passport, JWT를 사용하고 있습니다.토큰을 저장하기 위한 클라이언트 측 스토리지 옵션 중 몇 가지가 헷갈립니다.쿠키, 세션 및 JWT / 여권. 을 저장할 수 저장해야 ?req.sessionID 많은 웹 사이트가 쇼핑 카트 토큰을 저장하기 위해 쿠키를 사용합니다.지금까지는 쿠키를 추가하지 않고 세션 ID를 기반으로 쇼핑 카트 데이터를 저장했습니다. 사용자들이 제 했을 때, 저는 그것을 의 웹사이트와 입니다.req.sessionID그런 다음 쇼핑 카트나 사용자 세션과 같은 데이터베이스의 데이터를 가져옵니다. 키를를 보관 ?? ???할 수 은 '접근하다'입니다.req.sess..

programing 2023.03.04

플랫 번들링이란 무엇이며 롤업이 웹팩보다 나은 이유는 무엇입니까?

플랫 번들링이란 무엇이며 롤업이 웹팩보다 나은 이유는 무엇입니까? 최근 롤업을 알아보고 웹팩이나 다른 번들러와 어떻게 다른지 알아보고 있습니다.한 가지 우연히 알게 된 것은 "플랫 번들"로 인해 도서관에 더 좋다는 것이다.이는 Rollup을 활용하기 위한 최근 React 홍보와 트윗을 기반으로 합니다. 제 경험상, Rollup은 플랫 번들(호이스트 등)에 대한 최적화가 더 잘 되어 있기 때문에 라이브러리를 더 잘 구축할 수 있습니다.1/2 코드 분할 등이 포함된 앱을 번들하고 있다면 웹 팩 2가 더 나을 수 있습니다.2/2 하지만 그게 무슨 뜻인지 잘 모르겠어요.플랫 번들링이란 무엇입니까?Rollup의 문서에는 번들 크기를 줄이는 데 도움이 되는 트리쉐이킹이 기재되어 있는 것을 알고 있습니다만, Webp..

programing 2023.03.04

클릭 시 중첩된 React 구성 요소에서 이벤트가 버블링되는 것을 방지하려면 어떻게 해야 합니까?

클릭 시 중첩된 React 구성 요소에서 이벤트가 버블링되는 것을 방지하려면 어떻게 해야 합니까? 여기 기본 컴포넌트가 있습니다.둘 다그리고.onClick 기능이 있습니다.onClick만 원하는 경우발사하는 것이 아니라어떻게 하면 좋을까요? e.proventDefault(), e.stopPropagation()을 가지고 놀았지만 소용이 없었습니다. class List extends React.Component { constructor(props) { super(props); } handleClick() { // do something } render() { return ( { console.log('parent'); this.handleClick(); }} > { console.log('child'); ..

programing 2023.03.04

입력 Reactjs에 해당하는 JSX 닫기 태그가 필요합니다.

입력 Reactjs에 해당하는 JSX 닫기 태그가 필요합니다. 입력 필드가 있는 Reactjs에서 구성 요소를 생성하는 동안 오류가 발생합니다.Error: Parse Error: Line 47: Expected corresponding JSX closing tag for input at http://localhost/chat-react/src/script.js:47:20 var Main = React.createClass({ render: function() { return ( ); } }); 입력 요소를 닫아야 합니다./>마지막에. html 태그를 닫지 않을 때 발생합니다. 모든 html 태그가 닫혀 있는지 확인합니다. 저 같은 경우에는 태그. 태그가 있어야 합니다. . 누락된 html 태그가 발견될 ..

programing 2023.02.27

'자체' 무제한 글로벌 반응의 예기치 않은 사용

'자체' 무제한 글로벌 반응의 예기치 않은 사용 PWA 앱의 서비스 워커를 작성하려고 하면 이 에러가 발생합니다.구글/모질라 샘플을 서비스직 직원용으로 사용했습니다만, 어쨌든. var CACHE_NAME = 'test-cache'; var urlsToCache = [ '/' ]; self.addEventListener('install', function (event) { event.waitUntil( caches.open(CACHE_NAME) .then(function (cache) { console.log('Opened cache'); return cache.addAll(urlsToCache); }) ); }); 명시적으로 삭제할 수 있습니다.selfno-disabled-timeouts-rule 또는 ..

programing 2023.02.27

React.js에서 메타 태그를 업데이트하려면 어떻게 해야 합니까?

React.js에서 메타 태그를 업데이트하려면 어떻게 해야 합니까? react.js에서 한 페이지 어플리케이션 작업을 하고 있었습니다만, 페이지 전환이나 브라우저의 백/포워드 메타 태그를 갱신하는 가장 좋은 방법은 무엇입니까?이전 프로젝트에서 반응 문서 메타를 사용한 적이 있습니다. 메타 값을 정의하기만 하면 됩니다. const meta = { title: 'Some Meta Title', description: 'I am a description, and I can create multiple tags', canonical: 'http://example.com/path/to/page', meta: { charset: 'utf-8', name: { keywords: 'react,meta,document,..

programing 2023.02.27

새 React 앱 생성 중 오류 발생("최신 릴리스(5.0.0)보다 늦은 'create-react-app' 4.0.3을 실행 중)

새 React 앱 생성 중 오류 발생("최신 릴리스(5.0.0)보다 늦은 'create-react-app' 4.0.3을 실행 중) 언인스톨 파트를 실행해도, 이 Create React 앱 에러가 몇번이나 표시됩니다. npm uninstall -g create-react-app 최신판, 570ms에 1패키지 감사 완료 0개의 취약성을 발견했습니다. npx create-react-app test-app 계속하려면 create-react-app OK 패키지를 설치해야 합니까?(y) y .create-react-app.0 4.0.입니다. Create React App의 글로벌 설치를 더 이상 지원하지 않습니다. 다음 명령 중 하나를 사용하여 글로벌 설치를 제거하십시오. npm uninstall - g creat..

programing 2023.02.27
반응형