반응형

reactjs 42

리액트 훅 및 컴포넌트 라이프 사이클 등가

리액트 훅 및 컴포넌트 라이프 사이클 등가 에 상당하는 것은 무엇입니까?componentDidMount,componentDidUpdate,그리고.componentWillUnmount리액트 후크를 사용한 라이프 사이클 후크useEffect?componentDidMount 두 번째 인수로 빈 어레이를 전달합니다.useEffect()마운트 상에서만 콜백만 실행합니다. function ComponentDidMount() { const [count, setCount] = React.useState(0); React.useEffect(() => { console.log('componentDidMount'); }, []); return ( componentDidMount: {count} times { setCount..

source 2023.03.08

경고:비부울 Atribute에 대해 false를 수신했습니다.커스텀 부울 속성의 부울을 전달하려면 어떻게 해야 합니까?

경고:비부울 Atribute에 대해 false를 수신했습니다.커스텀 부울 속성의 부울을 전달하려면 어떻게 해야 합니까? Warning: Received `false` for a non-boolean attribute `comingsoon`. If you want to write it to the DOM, pass a string instead: comingsoon="false" or comingsoon={value.toString()}. React의 커스텀 속성에서 부울을 전달하려면 어떻게 해야 합니까? 스타일 컴포넌트를 사용하여 속성을 컴포넌트에 전달합니다.여기 제가 어떻게 아트를 지나가고 있는지 사진이 있습니다. 부울 사용자 지정 특성을 "coming soon"으로 전달 스타일 컴포넌트 CSS 소품대..

source 2023.03.08

리액트 테스트 라이브러리를 사용하여 재료 UI 자동 완성 테스트 방법

리액트 테스트 라이브러리를 사용하여 재료 UI 자동 완성 테스트 방법 material-ui autocomplete 컴포넌트를 사용하고 있으며 react-testing-library를 사용하여 테스트하려고 합니다. 컴포넌트: /* eslint-disable no-use-before-define */ import TextField from '@material-ui/core/TextField'; import Autocomplete from '@material-ui/lab/Autocomplete'; import React from 'react'; export default function ComboBox() { const [autocompleteInputValue, setAutocompleteInputValue..

source 2023.03.08

Jest를 여러 프리셋으로 동시에 사용할 수 있습니까?

Jest를 여러 프리셋으로 동시에 사용할 수 있습니까? jsdom과 react-native와 같이 여러 사전 설정과 함께 Jest를 사용할 수 있습니까? 웹 및 React Native 환경에서 모두 작동하는 React 컴포넌트를 테스트하고 싶습니다.문제는 구성 요소가 React Native 라이브러리 또는 일부 문서의 메서드를 사용할 수 있다는 것입니다. 몇 가지 테스트를 실행하면 농담의 답변이 나옵니다. 'react-native-implementation.js'에서 'NetInfo' 모듈을 찾을 수 없습니다. 추가하려고 하면 "jest": { "preset": "react-native" } 패키지화 합니다.제이슨, 알았어: ReferenceError: 창이 정의되지 않았습니다. 프리셋은 단순한 Java..

source 2023.03.08

create-module-app을 사용하는 동안 public, src 및 scripts 폴더가 생성되지 않음

create-module-app을 사용하는 동안 public, src 및 scripts 폴더가 생성되지 않음 는 '다니다'를 사용해서 새로운 .create-react-app된 명령어: "Docs")를 합니다.npx create-react-app my-app 이런 요.public src ★★★★★★★★★★★★★★★★★」script.다음의 순서로 시험해 주세요. npm rm -g create-react-app npm install -g create-react-app npx create-react-app my-app 원천위에서 말한 모든 제안을 시도해 봤지만, 나에게는 통하지 않는다.이 8097번지 제안은 저에게 효과가 있습니다.기본적으로, 나는 그냥 뛰어다닌다.npx create-react-app@lates..

source 2023.03.08

CORS 문제가 있는 Axios

CORS 문제가 있는 Axios 패키지에 프록시를 추가했습니다.json과 잘 작동했는데, npm 실행 후 CORS 문제가 다시 불거졌습니다. npm 실행 후 React 실행 후 CORS 문제를 어떻게 처리해야 하는지 아는 사람 있나요? 다양한 방법으로 Axios 요청에 헤더를 추가하려고 했습니다.단, Axios 요청에 'Access-Control-Allow-Origin' :'을 추가하지 못했습니다.코드는 다음과 같습니다. 패키지.json "proxy": { "*":{ "target" : "http://myurl"} } GetData.js axios.defaults.baseURL = 'http://myurl'; axios.defaults.headers.post['Content-Type'] ='applica..

source 2023.02.26

로드 시 메서드를 한 번만 호출하는 응답

로드 시 메서드를 한 번만 호출하는 응답 나는 Hooks에 처음 와서 나를 미행하게 만드는 사건들을 겪고 있다. 누군가가 나에게 납득이 가는 솔루션을 설명하거나 제공해주길 바란다. 컴포넌트 마운트에 메서드를 한 번만 로드하면 혼란이 생깁니다.이 방법을 시도해 봤는데, 효과가 있는데 이해가 안 돼요.누가 설명 좀 해줄래? const useMountEffect = fun => useEffect(fun, []) useMountEffect(() => { if (!isEdit) handleAddRow() }) const handleAddRow = () => { let appendArr = [...listArr, ''] setListArr(appendArr) } 다음 스레드:React useEffect를 사용하여 ..

source 2023.02.26

Redux를 사용하여 JWT 토큰을 새로 고치는 방법

Redux를 사용하여 JWT 토큰을 새로 고치는 방법 React Native Redux 앱은 인증에 JWT 토큰을 사용합니다.이러한 토큰을 필요로 하는 동작은 여러 가지가 있으며, 앱 로드 시 등에 많은 토큰이 동시에 디스패치됩니다. 예. componentDidMount() { dispath(loadProfile()); dispatch(loadAssets()); ... } 다.loadProfile ★★★★★★★★★★★★★★★★★」loadAssetsJWT에 대해서되며, 「 」는 「 」로 됩니다.AsyncStorage이치노 원래 토큰 유효기간을 처리하기 위해 미들웨어를 사용하려고 했습니다. // jwt-middleware.js export function refreshJWTToken({ dispatch, g..

source 2023.02.26

탭 탐색기를 사용하여 화면 구성 요소에 소품을 전달하는 방법

탭 탐색기를 사용하여 화면 구성 요소에 소품을 전달하는 방법 Stack Overflow에 대한 첫 게시물이므로 올바른 형식을 따르지 않았다면 죄송합니다. 나는 나의 첫 번째 앱을 만들고 있다.tab navigator from React Navigation v 5.x스크린에서 스크린으로 소품을 넘길 때 큰 문제에 부딪혔다. 달성하고 싶은 것은 다음과 같습니다. 화면 중 하나에서 데이터 목록을 변경합니다. 이러한 변경은 다른 화면에서 발생하는 작업에 영향을 줍니다. 나는 이것(소품 세팅에 실패), 이것(리액트 내비게이션의 폐지판) 및 이것(리액트 내비게이션의 구판)을 시험해 보았다. 리액트 내비게이션의 현재 버전에서는 사용할 수 있는 예가 없습니다. 나는 이것에 대해 내 인내심의 한계에 다다랐고 이것을 성취..

source 2023.02.26

img 태그 문제를 url 및 클래스로 대응

img 태그 문제를 url 및 클래스로 대응 JSX 파일에 다음과 같은 간단한 리액트 코드가 있습니다. /** @jsx React.DOM */ var Hello = React.createClass({ render: function() { return Hello {this.props.name}; } }); React.renderComponent(, document.body); DOM 의 출력은 다음과 같습니다. Hello World 두 가지 문제가 있습니다. 이미지 URL이 잘못 렌더링되어 'http://placehold.it/400x20undefined1''로 렌더링됩니다. 내 이미지의 클래스가 사라지다 좋은 생각 있어요?img는 실제로는 DOM 요소가 아니라 javascript 표현이라는 점에 유의하십..

source 2023.02.26
반응형