반응형

ReactJS 40

반응JS - 요소의 높이 가져오기

반응JS - 요소의 높이 가져오기 반응에서 해당 요소를 렌더링한 후 요소의 높이를 얻는 방법은? HTML jnknwqkjnkj jhiwhiw (this is 36px height) 리액션JS var DivSize = React.createClass({ render: function() { let elHeight = document.getElementById('container').clientHeight return Size: {elHeight}px but it should be 18px after the render; } }); ReactDOM.render( , document.getElementById('container') ); 결과 Size: 36px but it should be 18px afte..

IT이야기 2022.04.09

create-react-app에서 public/manifest.json 파일이란?

create-react-app에서 public/manifest.json 파일이란? 크롬 익스텐션은 manifest.json을 사용하는 것으로 알고 있지만 여기서는 다른 것으로도 쓰인다. 내용 - { "short_name": "React App", "name": "Create React App Sample", "icons": [ { "src": "favicon.ico", "sizes": "192x192", "type": "image/png" } ], "start_url": "./index.html", "display": "standalone", "theme_color": "#000000", "background_color": "#ffffff" } 값을 변경하면 페이지 업데이트가 수행되지만 아무것도 변경되지..

IT이야기 2022.04.09

'Proptypes'가 정의되지 않음

'Proptypes'가 정의되지 않음 의 도움을 받아 새로운 리액션을 설정하는 중: 리액션 앱 만들기 하지만, 나는 보풀 문제에 부딪히고 있다.는 보푸라기를 .'PropTypes' is not defined. (no-undef). 문제를 일으키는 코드는 다음과 같다. import React, { Component } from 'react'; import PropTypes from 'prop-types'; class Routers extends Component { static propTypes = { history: PropTypes.object.isRequired }; ... 나는 반응형식/제안형식 규칙을 가지고 장난을 치려고 했지만 소용이 없었다.반응 15.5이므로 PropTypes는 별도의 패키지인..

IT이야기 2022.04.06

반응 JS를 사용한 무한 스크롤

반응 JS를 사용한 무한 스크롤 무한 스크롤을 리액션으로 구현하는 방법을 찾고 있다.나는 리액티브 무한 스크롤을 우연히 발견했고, 그것이 단지 DOM에 노드를 추가하고 제거하지 않기 때문에 비효율적이라는 것을 알았다.Ract와 함께 DOM의 노드 수를 일정하게 추가, 제거 및 유지하는 검증된 솔루션이 있는가? 여기 jsfiddle 문제가 있다.이 문제에서, 나는 한번에 50개의 요소만 가지고 싶다.다른 것들은 사용자가 위아래로 스크롤할 때 로드되고 제거되어야 한다.우리는 그것의 최적화 알고리즘 때문에 리액션을 사용하기 시작했다.이제 나는 이 문제에 대한 해결책을 찾을 수 없었다.나는 에어비앤비 무한 js를 우연히 만났다.그러나 그것은 Jquery와 함께 시행된다.이 에어비앤비 무한 스크롤을 사용하려면 하..

IT이야기 2022.04.04

효소, ReactTestUtils와 react-testing-library의 차이

효소, ReactTestUtils와 react-testing-library의 차이 반응 테스트를 위한 효소, ReactTestUtils와 react-testing-library의 차이점은 무엇인가? ReactTestUtils 설명서에는 다음과 같은 내용이 수록되어 있다. ReactTestUtils를 사용하면 원하는 테스트 프레임워크에서 React 구성 요소를 쉽게 테스트할 수 있다. 효소 문서에는 다음과 같이 적혀 있다. 효소는 반응을 위한 자바스크립트 테스트 유틸리티로, 반응 성분의 출력을 더 쉽게 주장, 조작 및 트래버스할 수 있다. 반응 테스트 라이브러리 설명서: 리액션 테스트 도서관은 리액션 구성품을 테스트하기 위한 매우 가벼운 솔루션이다.리액션 돔 위에 광 유틸리티 기능을 제공한다. 왜 실제로 ..

IT이야기 2022.04.04

리액션 구성 요소를 부모 구성 요소와 비교하여 배치하는 방법?

리액션 구성 요소를 부모 구성 요소와 비교하여 배치하는 방법? 나는 Child React 구성 요소를 포함하는 부모 반응 구성 요소를 가지고 있다. Child 부모 안에서 위치를 정하기 위해 자식 구성요소에 스타일을 적용해야 하지만, 부모의 크기에 따라 위치가 달라진다. render() { const styles = { position: 'absolute', top: top(), // computed based on child and parent's height left: left() // computed based on child and parent's width }; return Child; } 나는 여기서 백분율 값을 사용할 수 없다. 왜냐하면 위와 왼쪽 위치는 아이의 기능이고 부모의 폭과 높이에 ..

IT이야기 2022.04.01

Resact Native 앱을 종료/종료하는 방법

Resact Native 앱을 종료/종료하는 방법 내 React Native 앱이 백엔드에 연결되지 않으면 OK(확인) 버튼을 눌러 알림을 표시한다.이렇게 되면 앱이 계속 실행될 수 있는 포인트가 없어서 버튼이 클릭되면 종료하고 싶다.이거 어떻게 하지? 나는 키가 AppRegistry에 있다고 의심하지만 문서들은 약간 부족하다.Android의 경우 BackHandler를 사용하여 앱 종료: import React, { BackHandler } from 'react-native'; BackHandler.exitApp(); 나는 질문에 너무 늦게 대답하고 있지만, 내가 선택한 방법이 누군가에게 도움이 될 수 있다고 생각해서 이 질문에 답하고 있어. componentWillMount() { BackHandle..

IT이야기 2022.03.29

at 기호(@)는 ES6 javascript에서 무엇을 하는가? (ECMAScript 2015)

at 기호(@)는 ES6 javascript에서 무엇을 하는가? (ECMAScript 2015) ES6 코드 몇 개를 보고 있는데 @ 기호가 변수 앞에 놓이면 어떻게 되는지 이해가 안 가.내가 찾을 수 있는 가장 가까운 것이 사적인 분야와 관련이 있다고? Redex 라이브러리에서 보고 있던 코드: import React, { Component } from 'react'; import { bindActionCreators } from 'redux'; import { connect } from 'redux/react'; import Counter from '../components/Counter'; import * as CounterActions from '../actions/CounterActions'; ..

IT이야기 2022.03.28

창에서 "브루" 명령을 실행하는 방법...?

창에서 "브루" 명령을 실행하는 방법...? 윈도 명령 프롬프트에 '브루'가 내·외부 명령으로 인식되지 않는다'는 것을 나타낸다. 첫 번째 명령이 있는 github에서 codeigniter-reactjs-예를 설치하려고 한다.brewWindows에서 프로젝트를 설치하기 위해 이 명령을 실행하는 방법..?편집: 홈브루는 아래 @VonC의 답변에서 자세히 설명한 대로 버전 2.0.0(2019년 2월 출시) 이후 Linux용 Windows Subsystem(WSL)에서도 사용할 수 있다.설치/사용 지침은 다음 사이트에서 확인하십시오. https://docs.brew.sh/Homebrew-on-Linux 홈브루는 MacOS 전용 명령줄 설치 프로그램이며 윈도우즈용으로는 존재하지 않는다. Windows의 대안: ..

IT이야기 2022.03.28

리액션 라우터의 쿼리 매개 변수를 프로그래밍 방식으로 업데이트하는 방법은?

리액션 라우터의 쿼리 매개 변수를 프로그래밍 방식으로 업데이트하는 방법은? 사용하지 않고 react-router로 쿼리 매개 변수를 업데이트하는 방법을 찾을 수 없는 경우.hashHistory.push(url)쿼리 매개 변수를 등록하지 않는 것 같고, 쿼리 개체나 어떤 것도 두 번째 인수로 전달할 수 없는 것 같다. URL을 변경하는 방법/shop/Clothes/dresses로/shop/Clothes/dresses?color=blue사용하지 않고 반응하여? 그리고 이다onChange기능 정말로 쿼리 변경을 청취할 수 있는 유일한 방법인가?쿼리 변경 내용이 매개 변수 변경과 같은 방식으로 자동으로 탐지 및 대응되지 않는 이유는?내push의 방법.hashHistory, 쿼리 매개 변수를 지정할 수 있다.예를..

IT이야기 2022.03.22
반응형