반응형

reactjs 31

ReactJs에서 이벤트에 className을 추가 또는 삭제하려면 어떻게 해야 합니까?

ReactJs에서 이벤트에 className을 추가 또는 삭제하려면 어떻게 해야 합니까? 나는 React에 대해 꽤 처음이고 표준 js에서 내 생각을 바꾸는 것에 조금 어려움을 겪고 있다. 반응 성분에는 다음과 같은 요소가 있습니다. click here 제가 찾고 있는 행동은 클릭 시 추가 클래스를 추가하는 것입니다.첫 번째 아이디어는 클릭 핸들러 기능에 클래스를 추가하는 것이었습니다. handleClick : function(e) { } 하지만 비슷한 일을 하는 예를 찾을 수 없었기 때문에 제대로 생각하고 있지 않다고 생각합니다. 누가 나를 올바른 방향으로 인도해 줄 수 있나요?클래스 목록은 컴포넌트 상태에서 얻을 수 있습니다.예를 들어 다음과 같습니다. var Component = React.crea..

IT 2023.03.14

반응 사이트 경고:href 속성에는 유효한 주소가 필요합니다.유효한 주소를 href 값 jsx-a11y/anchor-is-valid로 지정합니다.

반응 사이트 경고:href 속성에는 유효한 주소가 필요합니다.유효한 주소를 href 값 jsx-a11y/anchor-is-valid로 지정합니다. 내가 만든 리액트 사이트에서 경고가 표시됨 ./src/components/layout/Navbar.js [1] Line 31: The href attribute requires a valid address. Provide a valid, navigable address as the href value jsx-a11y/anchor-is-valid 다음 코드에 있습니다. {isEmpty(profile.website) ? null : ( )} {isEmpty(profile.social && profile.social.twitter) ? null : ( )} {isE..

IT 2023.03.14

react-redux 종속성을 설치하는 동안 오류가 발생했습니다.

react-redux 종속성을 설치하는 동안 오류가 발생했습니다. create-react-app 응용 프로그램에 react-redux 패키지를 설치하려고 하면 오류가 발생합니다.node_modules 폴더 삭제 및 재설치 및 관리자 권한으로 설치를 시도했지만 여전히 동일한 오류가 발생합니다. ➜ frontend git:(main) ✗ npm i react-redux npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree 콘솔의 나머지 출력은 다음과 같습니다. npm ERR! npm ERR! While resolving: frontend@0.1.0 npm ERR! Found: react@17.0.1 npm ERR! node_mo..

IT 2023.03.14

React 내부에 Polymer를 사용할 수 있습니까?

React 내부에 Polymer를 사용할 수 있습니까? 저는 React를 사용하고 있으며, React 내부에 Polymer 태그를 사용하고 있습니다.React는 기본 DOM 태그만 처리하므로 React는 폴리머 태그를 인식하지 않습니다.React DOM 라이브러리에 폴리머 태그를 추가하는 방법이 있습니까?네, 가능합니다. 폴리머 요소를 만듭니다. Polymer({ is: 'calender-element', ready: function(){ this.textContent = "I am a calender"; } }); 폴리머 컴포넌트를 html 페이지에 Import하여 html 태그로 만듭니다.예를 들어 리액트 애플리케이션의 index.html로 Import합니다. jsx 파일에서 이 요소를 사용합니다. ..

IT 2023.03.14

타이프스크립트 반응 - 'react-materialize' 모듈에 대한 선언 파일을 찾을 수 없습니다.'path/to/module-name.module'에는 암묵적으로 임의의 유형이 있습니다.

타이프스크립트 반응 - 'react-materialize' 모듈에 대한 선언 파일을 찾을 수 없습니다.'path/to/module-name.module'에는 암묵적으로 임의의 유형이 있습니다. react-materialize에서 구성 요소를 가져오려고 합니다. import {Navbar, NavItem} from 'react-materialize'; , 웹 할 때.tsx의 에러는 -어울리다, 라고 합니다. ERROR in ./src/common/navbar.tsx (3,31): error TS7016: Could not find a declaration file for module 'react-materi alize'. 'D:\Private\Works\Typescript\QuickReact\node_mo..

IT 2023.03.09

Material-UI RaisedButton 링크를 외부 URL에 연결하려고 해도 실패합니까?

Material-UI RaisedButton 링크를 외부 URL에 연결하려고 해도 실패합니까? 제목에 있는 질문으로. react, react-router 및 material-ui를 가지고 노는 것.한 곳에서 카드 컴포넌트의 액션버튼을 외부 URL에 링크하고 싶습니다. window.open을 사용할 이벤트 핸들러를 추가할까 생각 중인데, 더 스마트한 방법인가 봐요? 코드가 이렇게 되기 전에 해결책을 찾았어요 솔루션은 매우 단순했습니다. react-router Link 또는 material-ui 버튼에 외부 링크를 추가하는 경우 외부 URL에 'http://'(또는 https://)를 추가하는 것이 중요합니다.링크는 add http가 없으면 동작하지 않습니다. 잘못된 코드 - Google 리다이렉트 링크는 ..

IT 2023.03.09

기능하는 setState 내에서 이벤트 대상이 null입니다.

기능하는 setState 내에서 이벤트 대상이 null입니다. 일부 컴포넌트의 아래 기능을 고려합니다. handleInputChange(e) { // let val = e.target.value; - if I uncomment this, it works. // Update text box value this.setState(function (prevState, props) { return { searchValue: e.target.value, } }) } 및 텍스트박스는 상기 컴포넌트의 자 컴포넌트에 의해 렌더링되며,handleInputChange~하듯이props: 텍스트 필드에 입력하면 다음과 같은 오류가 발생합니다.Cannot read property 'value' of null. 첫 번째 줄의 코멘..

IT 2023.03.09

재스트 반응 테스트:지연 후 상태 확인

재스트 반응 테스트:지연 후 상태 확인 Jest 문서 https://facebook.github.io/jest/docs/timer-mocks.html#content를 사용하여 테스트를 작성하려고 하는데 매우 혼란스럽습니다. 컨테이너가 마운트될 때 상태를 확인하고 몇 초 후에 수동으로 (setTimeout()을 사용하여) 값을 설정한 후 상태를 확인하려고 합니다. Main의 componentDidMount 내부에 다음과 같은 기능이 있습니다. componentDidMount() { this.setStateAfterDelay(); } 이 기능은 다음과 같은 기능을 수행합니다. setStateAfterDelay = () => { setTimeout(() => { this.setState({ fruits: ['..

IT 2023.03.04

React-Native에서 Navigator 구성 요소를 사용한 사용자 정의 탐색

React-Native에서 Navigator 구성 요소를 사용한 사용자 정의 탐색 컴포넌트의 도움을 받아 뷰 사이를 커스텀 네비게이트 할 수 있는 데모 앱을 개발하면서 리액트 네이티브의 가능성을 탐색하고 있습니다. 앱 와 내부를 .renderScene이치노 class App extends React.Component { render() { return ( { return Navigator.SceneConfigs.FloatFromRight; }} renderScene={(route, navigator) => { // count the number of func calls console.log(route, navigator); if (route.component) { return React.createEle..

IT 2023.03.04

반응 성분과 반응 요소의 차이

반응 성분과 반응 요소의 차이 반응 구성 요소와 반응 요소의 차이점은 무엇입니까?이 문서에서는 두 가지 모두에 대해 언급하고 있지만 자세한 내용은 설명하지 않습니다.일부 방법에는 컴포넌트와 다른 요소가 필요합니다.여기에는 다음과 같은 세 가지 관련 정보가 포함되어 있으며, 그 이름은 다음과 같습니다. 구성 요소들 컴포넌트 인스턴스 요소들 다른 UI 프레임워크에 익숙하다면 두 가지 종류만 있을 것으로 예상할 수 있기 때문에 약간 놀랍습니다(예: 클래스(예:Widget: " " " ).new Widget()React에서는 그렇지 않습니다.컴포넌트 인스턴스는 요소와 동일하지 않으며 이들 사이에 일대일 관계도 없습니다.이를 설명하기 위해 다음 코드를 고려합니다. import React from 'react'; ..

IT 2023.03.04
반응형