reactjs 20

TypeScript를 사용한 함수 파라미터의 소품 파괴

TypeScript를 사용한 함수 파라미터의 소품 파괴 TypeScript를 사용하기 위해 컴포넌트 라이브러리에 접속하여 Respect의 스테이트리스 기능 컴포넌트를 ES6/JavaScript에서 TypeScript로 변환하려고 합니다.기능 외의 소품도 파라미터를 전달하면서 분해할 수 있는데 어떻게 하면 중복을 피할 수 있을까 고민입니다. 현재 컴포넌트는 다음과 같습니다. const allowedColors = { warning: "fa fa-exclamation", info: "fa fa-info", success: "fa fa-check", danger: "fa fa-minus-circle" }; const AlertIcon = ({ className, color, ...props }) => ( );..

programing 2023.03.15

React Router - 버전 업데이트 후 Router에서 스크립트 오류를 입력합니다.

React Router - 버전 업데이트 후 Router에서 스크립트 오류를 입력합니다. 방금 리액트 앱을 업그레이드하려고 했는데 react-displays - 4.0.19 ~4.0.20 반응 - 16.0.30 ~16.0.34 typescript - version "2.7.0-120180108" 내 앱에서는 'withRouter'를 사용하는 곳마다 암호 타입 오류가 발생합니다.모든 인터페이스 소품을 'any'로 교체하여 작동하도록 했습니다. import * as React from 'react'; import { Switch, Route, withRouter} from 'react-router-dom'; import { Login } from './Login'; import { connect } from..

programing 2023.03.10

대응 16: 경고: 일치하는 서버 HTML이 있어야 합니다.대응 16: 경고: 일치하는 서버 HTML이 있어야 합니다.에

대응 16: 경고: 일치하는 서버 HTML이 있어야 합니다.에 React 16으로 업그레이드한 후 다음 오류 메시지가 나타납니다. warning.js:33 Warning: Expected server HTML to contain a matching in . 이 에러 메시지의 일반적인 원인은 무엇이며, 수정 방법은 무엇입니까?사용하시는 경우ReactDOM.hydrate웹 응용 프로그램을 시작하려면 이 경고가 표시됩니다. 애플리케이션이 서버측 렌더링을 사용하지 않는 경우(ssr)를 사용해 주세요.ReactDOM.render시작하도록 하겠습니다.NextJS와 같은 서버 사이드 렌더링을 사용하는 경우 최근 코드를 삭제하고 DOM이 보장되지 않는 구성요소 범위 내에서 직접 변수에 액세스하려고 시도했는지 비교합니다..

programing 2023.03.05

babel을 사용한 후 IE에서 '심볼'이 정의되지 않음

babel을 사용한 후 IE에서 '심볼'이 정의되지 않음 나는 가지고 있다reactjsES6 표준을 사용하여 작성된 앱으로,webpack만들 수 있습니다.그webpack로드하다js모듈 사용babel-loader구체적으로 말하면, 다음과 같은 버전의 패키지를 사용하고 있습니다. ├── babel@5.8.34 ├── babel-core@5.8.34 ├── babel-loader@5.4.0 └── webpack@1.12.6 단, 빌드 후 IE 10은 다음과 같은 오류를 발생시킵니다.'Symbol' is undefined...이렇게 하면 안 될까요?babel정의하도록 되어 있다Symbol에 대한 특정 구성이 있습니까?webpack또는babel작동시키려면 설정을 해야 하나요?사용하고 있다{stage: 0}설정.b..

programing 2023.03.05

어레이 엔트리를 코드 한 줄의 확산 구문으로 바꾸시겠습니까?

어레이 엔트리를 코드 한 줄의 확산 구문으로 바꾸시겠습니까? 이 질문에는 이미 답변이 있습니다. 요소를 변환하지 않고 어레이의 특정 위치에서 교체합니다. (9개의 답변) 닫힘3개월 전에요. ...확산 구문을 사용하여 반응 상태 배열의 항목을 바꿉니다.이 방법은 다음과 같습니다. let newImages = [...this.state.images] newImages[4] = updatedImage this.setState({images:newImages}) 이것을 한 줄의 코드로 할 수 있을까요?이런 거?(이것은 분명히 효과가 없습니다.) this.setState({images: [...this.state.images, [4]:updatedImage}) Array.slice 사용 this.setState(..

programing 2023.03.05

goBack()이 라우터 v4에 응답하기 전에 이전 위치를 확인합니다.

goBack()이 라우터 v4에 응답하기 전에 이전 위치를 확인합니다. 목표는 "돌아가기" 버튼을 활성화하는 것입니다. 단, 사용자가 돌아가는 경로/경로가 특정 범주에 있는 경우에만 가능합니다. 보다 정확하게는 2종류의 루트가 있습니다./그리고./graph/사용자가 그래프 사이를 이동할 때 이전 그래프로 돌아갈 수 있어야 하지만/...루트를요. 이래서 그냥 도망칠 수가 없어요.history.goBack()먼저 위치를 확인해야 합니다. const history = createHashHistory(); const router = ( ); 이러한 기능을 구현하고 싶습니다.Graph컴포넌트: if (this.props.history.previousLocation().indexOf('graph') > -1){ t..

programing 2023.02.28

찾을 수 없는 아이콘 리액션-대박

찾을 수 없는 아이콘 리액션-대박 리액트에 대한 프로젝트가 있는데 FontAwesome을 통합해야 합니다.공식 라이브러리를 찾아서 readme의 지시에 따라 설치했습니다. $ npm i --save @fortawesome/fontawesome $ npm i --save @fortawesome/react-fontawesome 내 코드에서 이렇게 사용하려고 하면: 콘솔에 다음 오류가 나타납니다. Could not find icon {prefix: "fas", iconName: "plus"} Could not find icon {prefix: "fa", iconName: "coffee"} 나는 FontAwesome css 링크를 머리에 포함시키려고 했지만 도움이 되지 않았다.사용하고 있다npm v4.6.1;n..

programing 2023.02.23

일치 문제를 사용한 regex에서의 Yup 유효성 검사

일치 문제를 사용한 regex에서의 Yup 유효성 검사 Yup을 사용한 인증은 다음과 같습니다. const myValidtion = yup .string() .trim() .matches(/[abcdefghijklmnopqrstuvwxyz]+/ , 'Is not in correct format') .required(); 이것으로, 이것은 통과합니다.hello world역시나하지만 나를 혼란스럽게 하는 것은 왜 이 또한 통과할 것인가 하는 것이다.hello WORLD또는 이것도 통과합니다.hello ,&$#$ world 한편, 다음과 같은 비활성 문자만 입력하면*%$&#$($#이것은 통과되지 않고 나에게 오류를 보여줄 것이다.이렇게 하면 모든 엔트리가 유효하지 않은 경우에만 오류가 발생합니다. 사용자가 예..

programing 2023.02.23

React/Jsx에서 렌더 내의 함수를 호출하는 방법

React/Jsx에서 렌더 내의 함수를 호출하는 방법 내장된 HTML 내의 함수를 호출하고 싶습니다.다음을 시도했지만 함수가 호출되지 않습니다.이것이 렌더 메서드 내의 함수를 호출하는 잘못된 방법입니까? import React, { Component, PropTypes } from 'react'; export default class PatientTable extends Component { constructor(props) { super(props); this.state = { checking:false }; this.renderIcon = this.renderIcon.bind(this); } renderIcon(){ console.log("came here") return( Function calle..

programing 2023.02.23

const App: ( ) = > React$Node = ( ) = > {...: 이 순서의 의미는 무엇입니까?

const App: ( ) = > React$Node = ( ) = > {...: 이 순서의 의미는 무엇입니까? 에react-native init ProjectName, 메인 앱 파일App.js에는 다음 방법으로 컴포넌트를 선언하는 내용이 포함되어 있습니다. const App: () => React$Node = () => {...} 이 설명서는 무슨 뜻입니까? 제 말은, 저는 컴포넌트가 다음과 같이 정의되는 것에 익숙합니다.const App = () => {...}그래서 그 사이에 있는 표현은 잘 모르겠어요.: () => React$Node.Flow의 유형 정의로, 지속적인 App이 유형 함수이며 ReactNode를 반환합니다. React Node는 다음 유형 중 하나입니다.ReactChild | Rea..

programing 2023.02.23