반응형

ReactJS 25

React/React Native에서 컨스트럭터를 사용하는 것과 getInitialState를 사용하는 것의 차이점은 무엇입니까?

React/React Native에서 컨스트럭터를 사용하는 것과 getInitialState를 사용하는 것의 차이점은 무엇입니까? 둘 다 서로 바꿔 사용하는 걸 봤어요. 두 가지 주요 사용 사례는 무엇입니까?장점/단점이 있습니까?그게 더 나은 방법인가요?이 두 가지 접근법은 서로 호환되지 않습니다.ES6하고 ES6를 해야 .getInitialStateReact.createClass. ES6 클래스의 주제에 대해서는 React 공식 문서를 참조하십시오. class MyComponent extends React.Component { constructor(props) { super(props); this.state = { /* initial state */ }; } } 와 동등하다 var MyComponent..

programing 2023.04.06

반응과 함께 구글 사인 버튼 사용

반응과 함께 구글 사인 버튼 사용 리액트 어플리케이션에서 구글 사인인을 사용하려고 합니다.어플리케이션 외부에서 사인 버튼을 사용하는 것 자체는 정상적으로 동작하지만 커스텀 사인 컴포넌트 내에서 사용하는 경우 예상대로 동작하지 않습니다.사용자가 서명할 때 버튼 자체가 실행되어야 합니다.data-onsuccess방법.문제는 사인인이 작동해도 실행이 그 방법에 도달하지 않는다는 것입니다. 아마 리액션을 놓쳤겠지만 찾을 수가 없어요.도움이 필요하신가요?모든 항목과 컴포넌트 자체를 로드하는 html을 아래에서 찾을 수 있습니다. var SignIn = React.createClass({ onSignIn : function (google_user) { // I want this method to be execute..

programing 2023.04.06

react js에서 파일을 다운로드하는 방법

react js에서 파일을 다운로드하는 방법 api에서 응답으로 파일 URL을 받았습니다.사용자가 다운로드 버튼을 클릭하면 새 탭에서 파일 미리 보기를 열지 않고 파일이 다운로드됩니다.반응 js에서 이를 달성하는 방법은 무엇입니까? tldr: 파일을 URL에서 가져와 로컬 Blob으로 저장하고 링크 요소를 DOM에 삽입하여 클릭하여 Blob을 다운로드합니다. S3의 Cloudfront URL 뒤에 PDF 파일을 저장해 두었는데, PDF 미리보기로 새 탭을 열지 않고 버튼을 클릭해서 바로 다운로드를 시작할 수 있도록 하고 싶었습니다.일반적으로 사용자가 현재 있는 사이트가 다른 도메인을 가진 URL에서 파일을 호스트하는 경우 사용자 보안상의 이유로 많은 브라우저에서 즉시 다운로드가 차단됩니다.이 솔루션을 사..

programing 2023.04.01

오류: [Home]이(가) 구성 요소가 아닙니다. 의 모든 구성 요소는 또는이어야 합니다.

오류: [Home]이(가) 구성 요소가 아닙니다. 의 모든 구성 요소는 또는이어야 합니다. 여러분, 저는 제 앱을 만들려고 하는데 리액트 라우터-dom을 6.02로 업데이트한 후 이 오류가 발생합니다. 오류: [Home]은(는) Route 구성 요소가 아닙니다.Routes의 모든 컴포넌트 자식은 Route 또는 여야 합니다.프래그먼트> 코드는 다음과 같습니다. import { BrowserRouter, Route, Routes } from "react-router-dom"; import Navbar from "./components/Navbar/Navbar"; import Home from "./pages/home/Home"; import Login from "./pages/login/Login"; im..

programing 2023.04.01

babel-preset-es2015 모듈을 찾을 수 없습니다.

babel-preset-es2015 모듈을 찾을 수 없습니다. 동일한 오류가 다시 표시됩니다.Error: Cannot find module 'babel-preset-es2015'. 전체 오류 로그: ERROR in ./main.js Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module 'babel-preset-es2015' from 'C:\Users\hp\Desktop\reactApp' at Function.module.exports [as sync] (C:\Users\hp\Desktop\reactApp\node_modules\resolve\lib\sync.js:43:15) at resol..

programing 2023.04.01

create-react-app 기반 프로젝트를 실행할 포트를 지정하려면 어떻게 해야 합니까?

create-react-app 기반 프로젝트를 실행할 포트를 지정하려면 어떻게 해야 합니까? 제 프로젝트는 create-react-app을 기반으로 합니다. npm start ★★★★★★★★★★★★★★★★★」yarn start기본적으로는 package.json에 포트를 지정하는 옵션은 없습니다. 이 경우 원하는 포트를 지정하려면 어떻게 해야 합니까?를 동시에 는 포트 2에 (테스트용도는 1입니다.3005 또 는 또또 and and and and 。3006환경변수를 설정하지 않을 경우 다음 옵션을 사용하여scripts★★★★★★★★★★★★★★★★★★: "start": "react-scripts start" 로. Linux(Ubuntu 14.04/16.04) 및 MacOS(MacOS Sierra 10.12...

programing 2023.04.01

페이지당 문서 제목을 설정하는 방법

페이지당 문서 제목을 설정하는 방법 실제로 사용하고 있는 것은pages/_document.js추가할 후크Bootstrap그리고.jQuery내 페이지로 이동합니다. ) } } 이제 내 페이지에 다른 제목을 설정하려고 합니다.사용할 수 있습니까? ... ) } 또한 가능한 경우 에서 이미 설정되어 있는 것을 덮어쓰거나 병합합니까?pages/_document.js?를 사용하고 싶다.next/head컴포넌트: import Head from 'next/head' export default () => Hello world! 다음 문서를 참조하십시오.https://nextjs.org/docs/api-reference/next/head언급URL : https://stackoverflow.com/questions/521..

programing 2023.03.27

이벤트 핸들러를 사용하는 정적 HTML 요소를 수정하려면 역할이 필요합니다.

이벤트 핸들러를 사용하는 정적 HTML 요소를 수정하려면 역할이 필요합니다. reactjs 스타일 컴포넌트에는 다음 코드가 포함되어 있습니다. this.gotoLink()}> 이것은 정상적으로 동작하지만, eslint에서 다음과 같은 문제가 발생합니다. Static HTML elements with event handlers require a role. 이 오류를 수정하려면 어떻게 해야 합니까?이 경고를 피하기 위해 태그에 역할 소품을 추가해야 합니다(예: 단추). this.gotoLink()}> 당신의 앵커 태그에 HREF 소품이 없기 때문인 것 같습니다(잘 모르겠습니다).저 같은 경우에는aria-hidden="true"그리고 나서 나는 헌신할 수 있었다. 이전: aria-hidden으로 업데이트한 후..

programing 2023.03.22

웹 팩 번들의 크기를 최소화하는 방법

웹 팩 번들의 크기를 최소화하는 방법 가 지금 react ★★★★★★★★★★★★★★★★★」webpack모듈 번들러로 사용할 수 있습니다. ★★★jsx코드가 너무 가벼워서 전체 폴더 크기가 25kb입니다. ★★★bundle.js에서 되었습니다.webpack2.이지만 22 mb입니다.에서 한 후-p플래그를 사용하면 번들이 700kb로 줄어들어 여전히 매우 큰 크기입니다. 제가 조사했습니다.react.min.js130kb이다. 웹 팩이 이렇게 큰 파일을 생성하거나 제가 잘못하고 있는 걸까요? webpack.config.syslog var path = require('path'); var webpack = require('webpack'); module.exports = { entry: './public/com..

programing 2023.03.22

react-dom을 사용한 jajest 단위 테스트에서 act()를 사용하는 경우

react-dom을 사용한 jajest 단위 테스트에서 act()를 사용하는 경우 반응 장치 테스트 문서에 따르면: 액트() 어설션을 위한 컴포넌트를 준비하려면 코드를 렌더링하고 act() 호출 내에서 업데이트를 수행합니다.이렇게 하면 브라우저에서 React가 작동하는 방식에 더 가깝게 테스트가 실행됩니다. 하지만 테스트는 두 경우 모두 완벽하게 잘 진행됩니다. act()를 사용하지 않음 it('Should return some text', () => { render(, container); expect(container.textContent).toBe('some text'); }); 액트() 포함 it('Should return some text', () => { act(() => { render(, ..

programing 2023.03.22
반응형