lastmemo

리액트 앱에서 joke를 사용하여 description이 정의되지 않았습니다. 나는 농담을 처음 하고 다음 코드의 몇 가지 기본적인 것들을 알아내려고 한다. import * as actions from './IncrementalSearchActions'; describe('Incremental Search Actions', () => { it('Should create an incremental search action') }); 이에 대해 궁금한 점이나 혼란스러운 점은 description이 정의되지 않았습니다.필요한 모듈을 Import하려면 어떻게 해야 합니까? 카르마/재스민과 함께 사용하는 건가요? 저는 여기 답이 당신의 질문에 대한 대답이라고 생각합니다. TL;DR;: 다음 항목을 추가합니다..e..

리액트에서 HTML 코멘트를 렌더링하는 방법 현재 렌더 메서드는 단일 요소/구성 요소만 반환할 수 있습니다.참조: 여기 이 티켓에 대한 설명에서 일부에서는 리액트 구성 요소에서 반환된 여러 요소를 HTML 코멘트로 래핑하여 래핑 구성 요소를 브라우저에 의해 무시하도록 제안합니다. 다음과 같은 경우: 그러나 HTML 코멘트만을 렌더링하는 컴포넌트를 실제로 작성하려면 어떻게 해야 할까요?즉, 위의 예에서 '조각' 구성요소의 렌더링 함수는 어떻게 보일 수 있습니까?최근 프로젝트 중 하나에서 다음과 같이 결론을 내렸습니다. import React, {Component, PropTypes} from 'react'; import ReactDOM from 'react-dom'; class ReactComment ex..

외부 React에서 컴포넌트 상태 업데이트(서버 응답 시 리액트를 배우는 중입니다.지금 몇 개 있어요.components부모-자녀로서 체인으로 되어 있기 때문에 콜백에 의해 이들 간의 통신이 용이하게 이루어집니다. 테이블(반응 성분)과 작은 모달 아약스 형태(반응 없음)가 있습니다.서버로부터 답변(아이템)을 받으면 테이블에 아이템을 추가하고 싶습니다. 주요 질문은 외부 반응에서 컴포넌트 상태 변경을 트리거할 수 있는가(이 경우 서버 응답에서)입니다. 컴포넌트 외부에서 컴포넌트 상태 변경을 트리거할 수 있습니까? 네. 여기 간단한 예가 있습니다. 반응 구성요소에서 함수가 실행될 때 상태를 업데이트하는 전역적으로 사용 가능한 폐쇄를 설정합니다. componentDidMount(){ globalVar.call..

next.js에서의 포트 설정 방법 하나의 응용 프로그램이 포트 3000에서 실행되고 있으며 기본 포트의 다른 포트에서 다른 응용 프로그램을 실행합니다.리액트 넥스트.js에서의 변경 방법package.js 스크립트는 "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "next", "build": "next build", "start": "next start" }, start script 명령어는npm run dev이것은 나에게 효과가 있다. "scripts": { "dev": "next dev -p 8080", "start": "next start -p 8080", }, "scripts": { "dev": "next de..

프로펠러 변경 시 Re-render React 구성 요소 컨테이너 컴포넌트에서 프레젠테이션 컴포넌트를 분리하려고 합니다.나는 가지고 있다SitesTable및 aSitesTableContainer컨테이너는 현재 사용자를 기반으로 적절한 사이트를 가져오는 redux 액션을 트리거하는 역할을 합니다. 문제는 컨테이너 컴포넌트가 처음 렌더링된 후 현재 사용자가 비동기적으로 Import된다는 것입니다.즉, 컨테이너 컴포넌트는 컨테이너 컴포넌트에서 코드를 재실행할 필요가 있음을 인식하지 못합니다.componentDidMount에 송신할 데이터를 갱신하는 기능SitesTable소품(사용자)이 바뀌면 컨테이너 컴포넌트를 다시 렌더해야 할 것 같습니다.어떻게 하면 좋을까요? class SitesTableContainer..

componentWillReceiveProps가 아닌 라이프 사이클 메서드 getDerivedStateFromProps를 사용하는 방법 이 모양은componentWillReceiveProps새로운 라이프 사이클 방식을 위해 향후 출시에서는 완전히 폐지될 예정입니다.getDerivedStateFromProps: static get Derived State From Props(). 검사한 결과, 당신은 이제 직접 비교할 수 없는 것 같습니다.this.props그리고.nextProps할 수 있는 것처럼componentWillReceiveProps다른 방법이 없을까요? 또한 오브젝트를 반환합니다.수익률은 기본적으로 다음과 같은 것으로 가정하는 것이 맞습니까?this.setState? 다음은 온라인에서 찾은 예입..

적발되지 않은 불변 위반:리렌더가 너무 많아무한 루프를 방지하기 위해 리액트는 렌더링 수를 제한합니다. 사용자가 로그인하거나 로그인하지 않을 때마다 메시지를 표시하기 위해 snackBar를 추가하려고 합니다.스낵바.jsx: import React from "react"; import PropTypes from "prop-types"; import classNames from "classnames"; import CheckCircleIcon from "@material-ui/icons/CheckCircle"; import ErrorIcon from "@material-ui/icons/Error"; import CloseIcon from "@material-ui/icons/Close"; import gree..

NextJs와 CreateReact App의 차이점은 무엇입니까? NextJs와 CreateReact App의 차이점을 알아보려고 합니다.둘 다 ReactJs를 사용하여 프런트 엔드 앱을 개발하면서 우리의 삶을 더 쉽게 만들 수 있다는 것을 알고 있습니다. 구글에서 몇 가지 기사를 찾아본 결과, 가장 큰 차이점은 NextJs는 SSR(Server Side Rendering)을 제공하고 Create React App은 CSR(클라이언트 사이드 렌더링)을 제공하며 SSR은 애플리케이션 로딩 성능을 향상시킵니다. 하지만 개발 관점에서 볼 때 다음과 같은 다른 매개 변수는 어떻습니까? NextJS 또는 CRA와 함께 개발된 웹 애플리케이션의 유지 보수성과 확장성 타이프스크립트 및 리액트 훅/Redux 지원 아니..

React propTypes 컴포넌트 클래스? 제공된 소품이 (인스턴스가 아닌) 컴포넌트 클래스인지 확인하려면 어떻게 해야 합니까? 예. export default class TimelineWithPicker extends React.PureComponent { static propTypes = { component: PropTypes.any, // = 15.7.0신참PropTypes.elementType이 풀 리퀘스트에 추가되어 2019년 2월 10일에 공개되었습니다. 이 프로펠러 유형은 모든 컴포넌트(네이티브컴포넌트, 스테이트리스컴포넌트, 스테이트풀컴포넌트, Forward Ref)를 지원합니다.React.forwardRef, 컨텍스트 프로바이더/프로바이더). 그리고 이러한 요소가 없을 때 경고를 보냅..

어떻게 반응해서 아래로 스크롤합니까? 채팅 시스템을 구축하여 창으로 들어가거나 새로운 메시지가 들어오면 자동으로 아래로 스크롤하고 싶습니다.React에서 용기의 맨 아래로 자동 스크롤하려면 어떻게 해야 합니까?Tushar가 언급했듯이 채팅 하단에 더미 div를 유지할 수 있습니다. render () { return ( {this.renderMessages()} { this.messagesEnd = el; }}> ); } 컴포넌트가 갱신될 때마다 스크롤합니다(즉, 새로운 메시지가 추가될 때 상태가 갱신됩니다). scrollToBottom = () => { this.messagesEnd.scrollIntoView({ behavior: "smooth" }); } componentDidMount() { this..