tipmemo

NextJS _app.tsx 컴포넌트 및 pageProps의 TypeScript 유형을 선택합니다. NextJS의 기본 _app.tsx는 다음과 같습니다. function MyApp({ Component, pageProps }) { return ( ) } 문제는 TypeScript로 전환하자마자 ES6Lint 아래에 이러한 유형이 본질적으로 '임의'로 설정되어 있다는 경고가 표시된다는 것입니다.단, 이 두 가지 타입을 어떤 타입으로 설정하면 나중에 미스매치가 발생할지 알 수 없습니다.이 두 가지를 어떤 타입으로 캐스팅해야 합니까?빌트인AppPropstype이 범용이 되었습니다.커스텀을 사용하려면PageProps에 전달하다AppProps입력: import { AppProps } from 'next/app'..

registerServiceWorker는 React JS에서 무엇을 합니까? 저는 React를 처음 접하는 사람인데, 아래 코드에 register Service Worker()의 목적은 무엇입니까? import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import registerServiceWorker from './registerServiceWorker'; ReactDOM.render(, document.getElementById('root')); registerServiceWorker(); 서비스 워커는 자산 및 기타 파일을 캐시할 수 있도록 지원하는 웹 API입니다.이것에 의해, 유저는 오프라인 또는..

리액트 테스트 라이브러리에서 버튼이 비활성화되었는지 확인합니다. React 컴포넌트가 있으며, 이 컴포넌트에는 버튼이 포함되어 있습니다.다음과 같은 요소: function Click(props) { return ( Click me ); } 이 컴포넌트의 로직을 테스트하고 싶다.react-testing-library그리고.mocha+chai. 그 순간 내가 고수했던 문제는getByText("Click me")Selector는DOM 노드, 하지만 테스트를 위해disable의 속성노드. 이러한 테스트 케이스를 처리하기 위한 베스트 프랙티스는 무엇입니까?몇 가지 해결 방법이 있는데, 모두 좀 이상한 것 같습니다. 사용하다data-test-id위해서요소 의 상위 항목 중 하나를 선택합니다.컴포넌트를 선택하고 버튼..

jsx 코드 형식이 올바르지 않은 이유는 무엇입니까? vscode제가 좋아하는 에디터인데 코드 포맷에 문제가 있어요.여기 제 것이 있습니다.jsx코드: return {title} {subTitle} + + 를 사용하여 포맷하면 다음과 같이 표시됩니다. return { title } { subTitle } 분명히, 그것은 옳지 않다. vscode버전 -v1.10.2코드 포맷 확장을 설치하지 마십시오. 따라서 코드 포맷 확장을..

검출되지 않은 오류:불변 위반: find ComponentRoot(......$110):요소를 찾을 수 없습니다.이것은 아마도 DOM이 예기치 않게 변환되었음을 의미합니다. React에서 중첩된 사이클에서 잘못된 점은 무엇입니까?구글에서 정보를 검색해 봤는데 마땅한 정보를 찾지 못했어요.제가 잘못 이해한 부분을 찾을 수 있게 도와주실 수 있나요? 그림에서 알 수 있듯이 변수 안에 데이터가 있습니다.그리고 그것은 잘 작동한다.그러나 이 값이 아닌 값을 추가할 때는, 에러가 표시됩니다. var TableBalls80 = React.createClass({ render:function(){ var rows = this.props.rows; var columnId = 0, trKey = 0, divKey = 0..

리액트 JS에서 jQuery UI를 사용하는 방법 react에서 jQuery UI를 사용하려면 어떻게 해야 합니까?구글링의 사례를 몇 번 봤지만 모두 시대에 뒤떨어진 것 같다.꼭 그렇게 해야 한다면, 여기 제가 사용하는 방법이 있습니다. 계획: jQuery 플러그인을 관리할 컴포넌트를 만듭니다.이 구성 요소는 jQuery 구성 요소의 반응 중심 보기를 제공합니다.또한 다음과 같은 이점이 있습니다. 리액트 라이프 사이클 메서드를 사용하여 jQuery 플러그인을 초기화 및 해체합니다. 사용props플러그인 구성 옵션 및 플러그인 메서드 이벤트에 접속합니다. 구성 요소가 마운트 해제되면 플러그인을 삭제합니다. jQuery UI Sortable 플러그인을 사용하여 이를 수행하는 실제 예를 살펴보겠습니다. TLD..

React.js에서 모듈을 해결할 수 없습니다(찾을 수 없음). 당연한 질문이라는 것을 믿을 수 없지만 콘솔 로그에 오류가 여전히 표시됩니다. 콘솔에서는 디렉토리에서 모듈을 찾을 수 없다고 합니다만, 오타가 없는지 10번 이상 확인했습니다.어쨌든, 여기 컴포넌트 코드가 있습니다. root에 헤더를 렌더링하고 싶다. import React, { Component } from 'react' import Header from './src/components/header/header' import logo from './logo.svg' import './App.css' class App extends Component { render() { return ( ); } } export default App; 은 ..

react-router 4.0, react-router-dom 및 react-router-redux의 차이점은 무엇입니까? 리액트 어플리케이션으로 루팅을 구현하고 있습니다.react-router 4.0이 react-router-redux에 비해 어떤 이점이 있는지 헷갈립니다.나도 리액트 라우터돔에 혼란스럽다. react-router-redux, react-router 4.0 및 react-router-dom의 장점과 단점은 무엇입니까?react-routerv4는 베이스, 빌딩 블록입니다.라우팅 솔루션을 작성하기 위한 API를 제공합니다. react-router-dom에 싸여 있다react-router.브라우저에서 실행되어야 합니다. react-router-redux이른바 '컨트롤드 라우터'라고 불리는 서..

오류 'babel-core' 모듈을 찾을 수 없습니다.react.displays, webpack 및 express 서버 사용 달릴 때마다webpack터미널에서 다음을 얻을 수 있습니다. Hash: efea76b1048c3a97b963 Version: webpack 1.12.13 Time: 33ms + 1 hidden modules ERROR in Cannot find module 'babel-core' 여기 webpack.config.js 파일이 있습니다. module.exports = { entry: './app-client.js', output: { filename: 'public/bundle.js' }, module: { loaders: [ { exclude: /(node_modules|app-se..

material ui에서 수평 스크롤이 발생합니다. - 사용하고 있다Material-UI버전 1. 다음 명령으로 설치됩니다. npm install -S material-ui@next 사용할 때마다 페이지에 불필요한 가로 스크롤이 표시됩니다. 코드: import React from 'react'; import PropTypes from 'prop-types'; import { withStyles, createStyleSheet } from 'material-ui/styles'; import Paper from 'material-ui/Paper'; import Grid from 'material-ui/Grid'; /* project imports */ import NavMenu from './Page-Par..