minimum

useRef "값을 참조하지만 여기서 유형으로 사용되고 있습니다." 어떤 요소가 참조로 사용되고 있는지(예: 내 경우) 확인하는 방법을 알아보려고 합니다. const circleRef = useRef(undefined); AnimatedCircle서드파티 라이브러리의 SVG 컴포넌트입니다.이렇게 정의하면 에러가 발생합니다. 어떤 요소가 참조인지 정의할 수 있는 보편적인 방법이 있습니까?내 경우 파일 이름을 다음과 같이 변경했습니다..ts대신.tsx. 다시 이름을 바꾸면 수정되었습니다.AnimatedCircle타입이 아닌 함수입니다.이는 TypeScript에서 일반적인 제약조건과 같이 TypeScript 대신 사용할 수 없음을 의미합니다.useRef그 대신에, 를 사용해 주세요.typeof operator..

React Native에서 라디오 버튼을 구현하는 방법 React 코드를 React Native로 변환합니다.그래서 라디오 버튼을 구현해야 합니다.베어본 RN만으로 라디오 버튼을 쉽게 흉내낼 수 있습니다.다음은 제가 사용하는 간단한 구현입니다.사이즈, 색상 등을 원하는 대로 조정.이렇게 되어 있습니다(다른 색조와 약간의 텍스트가 있음).더하다TouchableOpacity버튼을 눌러서 무언가를 할 수 있게 합니다. function RadioButton(props) { return ( { props.selected ? : null } ); } 이것은 radioButtons(소스, php 단계별 채널 덕분에)를 만드는 또 다른 방법입니다. 방법 1 constructor(props) { super(props);..

getDerivedStateFromError와 componentDidCatch의 차이점은 무엇입니까? 여기서 알게 된 점: componentDidCatch: 브라우저에서 항상 호출됩니다. DOM 이 이미 갱신되어 있는 경우는, 「커밋 단계」중에 호출됩니다. 오류 보고와 같은 용도로 사용해야 합니다. getDerivedStateFromError: 또한 서버측에서 server-side-paraming 중에 호출됩니다. DOM이 아직 갱신되지 않은 경우 "렌더 단계"에서 호출됩니다. 폴백 UI 렌더링에 사용해야 합니다. 그래도 몇 가지 혼란스러운 점이 있습니다. 둘 다 같은 유형의 오류를 감지하고 있습니까?아니면 라이프 사이클마다 다른 에러가 검출됩니까? (같은 '오류 포착' 컴포넌트로) 항상 둘 다 사용해야..

리액트 라우터 v6의 컴포넌트 외부 탐색 react-router v5에서 다음과 같은 이력 객체를 작성했습니다. import { createBrowserHistory } from "history"; export const history = createBrowserHistory(); 다음으로 라우터에 전달했습니다. import { Router, Switch, Route, Link } from "react-router-dom"; ... my routes 컴포넌트 이외에서 이력을 사용할 수 있도록 하기 위해 이 작업을 실시했습니다. // store action logout() { this.user = null; history.push('/'); } 이렇게 해서 로직을 상점으로 옮겼더니 부품은 최대한 깨끗하게 ..

추가 방법 두 줄 사이에 리액트 태그를 붙이는 게 어때요? 리액트 하고 있어요.줄 바꿈을 추가하고 싶다 현악기 사이에 '결과 없음' 및 '다른 검색어를 사용해 보십시오'입니다. 난 시도했다.'No results. Please try another search term.' 하지만 동작하지 않습니다. 를 참조해 주세요. 어떻게 해결할지 생각나는 거 없어? render() { let data = this.props.data; let isLoading = this.props.isLoading; let isDataEmpty = Object.entries(data).length === 0; let movieList = isLoading ? : isDataEmpty ? 'No results. Please try an..

확장자가 .js인 파일에서는 JSX가 eslint-config-airbnb에서 허용되지 않습니다. eslint-config-airbnb는 ESLINT for React를 사전 설정하도록 설치했습니다. 기본 내보내기에는 ECMAScript 6+ 및 React를 포함한 모든 ESLint 규칙이 포함됩니다.여기에는 eslint, eslint-plugin-import, eslint-plugin-react 및 eslint-plugin-jsx-a11y가 필요합니다. 나의.eslintrc설정을 확장합니다. { "extends": "eslint-config-airbnb", "env": { "browser": true, "node": true, "mocha": true }, "rules": { "new-cap": [2,..

ReactJs에서 componentWillUnmount()를 올바르게 사용하는 방법 공식 튜토리얼에서: componentWillUnmount()컴포넌트가 마운트 해제되어 파기되기 직전에 호출됩니다.타이머 비활성화, 네트워크 요청 취소, 에서 작성된 DOM 요소 청소 등 이 방법으로 필요한 청소를 수행합니다.componentDidMount "무효 타이머"를 이해했습니다. fetch와 함께 중단될 수 있다AbortController그러나, 「DOM 요소를 소거한다」는 것은 이해할 수 없습니다.componentDidMount"그 경우의 예를 들면?네트워크 요구 송신 라이브러리가 진행중인 네트워크 요구 콜의 중단을 서포트하고 있는 경우는, 에서 확실히 콜 할 수 있습니다.componentWillUnmount방법..

CSS 모듈 및 리액트를 사용한 여러 클래스 이름 다음 코드를 사용하여 소품에서 부울을 기반으로 React 컴포넌트에서 className을 동적으로 설정합니다. ... 단, CSS 모듈도 사용하고 있기 때문에 className을 다음과 같이 설정해야 합니다. import styles from './styles.css'; ... 여러 클래스를 제어하기 위해 클래스 이름을 사용하려고 했지만 className이 둘 다로 설정되도록 최종 결과가 필요하기 때문에 문제가 있습니다.styles.sideMenu 그리고. styles.active(CSS 모듈을 활성화하기 위해) 어떻게 대처해야 할지 잘 모르겠습니다. 어떤 안내라도 감사합니다.클래스 이름 및 es6 사용: let classNames = classnames..

reactjs 컴포넌트에서 "key" 속성에 액세스하는 방법 어떻게 하면key컴포넌트의 속성.이 안에 있을 줄 알았는데 안 나오네요. 예. 그리고 만약 내가 한다면 제품 목록에 console.log(this.props) 돌아온다 Object {listId: "list1", name: "Default", items: Array[2]} 핵심 재산도 전혀 없이요다른 속성을 생성하여 동일한 값을 할당할 수 있지만 키 속성이 이미 사용되고 있기 때문에 중복된 것 같습니다. 또한 키 속성은 전체 구성 요소에서 고유해야 합니까, 아니면 렌더링 중인 루프 또는 컬렉션에서만 고유해야 합니까?그key속성은 React가 후드 아래에서 사용하며 사용자에게 노출되지 않습니다.커스텀 속성을 사용하여 데이터를 전달합니다.의미론적으..

반응으로 자동 완성이 꺼지지 않음 리액션으로 렌더링하려면 어떻게 해야 하나요? 대문자 "C"autoComplete이는 React 매뉴얼에 기재되어 있습니다. https://reactjs.org/docs/dom-elements.html#all-supported-html-attributes다음 항목을 입력해야 합니다. autoComplete="new-password" 그러면 자동 완성이 제거됩니다.Mozilla 문서에 따르면 자동 완료를 끄려면 잘못된 값을 설정해야 합니다.일부 브라우저에서는 속성이 off로 설정되어 있어도 자동 완성 제안이 계속 제공됩니다. 이것은 나에게 효과가 있었다(react-bootstrap): 정답을 읽었는데도 이 문제가 있다면(특히 Chrome에서) 클럽에 오신 것을 환영합니다.내..