bestprogram

redux 툴킷을 사용할 때 "상태에서 직렬화할 수 없는 값이 검출되었습니다"라는 오류가 표시되지만 일반 redux에서는 검출되지 않습니다. 빌드 중인 앱을 Redux Toolkit으로 전환하려고 하는데 createStore에서 configureStore로 전환하자마자 다음 오류가 발생한다는 것을 알게 되었습니다. A non-serializable value was detected in the state, in the path: `varietals.red.0`. Value:, Varietal { "color": "red", "id": "2ada6486-b0b5-520e-b6ac-b91da6f1b901", "isCommon": true, "isSelected": false, "varietal": "bord..

Threejs를 React에 연결하는 방법 저는 React와 함께 일하며 캔버스를 사용합니다.캔버스를 WebGL(Threejs Library)로 변경하고 싶습니다.이 라이브러리를 React에 연결하는 방법 몇 가지 요소가 있습니다. Threejs 라이브러리 콜을 위한 필드를 만드는 방법은 무엇입니까?다음과 같은 확장자를 사용하고 싶지 않습니다.react-threejs.이 설정 방법의 예를 다음에 나타냅니다(데모를 참조). import React, { Component } from 'react' import * as THREE from 'three' class Scene extends Component { constructor(props) { super(props) this.start = this.star..

Redux에 여러 미들웨어를 추가하는 방법 미들웨어는 이미 연결되어 있고, 레덕스-펑크도 하나 더 추가하려고 합니다. 내 앱이 두 미들웨어를 모두 사용하도록 구성하려면 어떻게 해야 합니까?나는 여러 가지 방법으로 통과를 시도했다[ReduxThunk, logger]하지만 소용없었어요 코드: import React from 'react'; import ReactDOM from 'react-dom'; import { Provider } from 'react-redux'; import { createStore, applyMiddleware } from 'redux'; import ReduxThunk from 'redux-thunk'; import logger from 'redux-logger'; import A..

React의 인라인 CSS 스타일: 호버를 구현하는 방법 React의 인라인 CSS 패턴이 마음에 들어서 사용하기로 했습니다. 이렇게 하다, 하다, 하다, 하다, 이렇게 안 요.:hover및 유사한 셀렉터.그렇다면 인라인 CSS 스타일을 사용하여 하이라이트 온 호버를 구현하는 가장 좋은 방법은 무엇일까요? # 중 하나는 #reactjs를 입니다.Clickable컴포넌트를 사용하여 다음과 같이 사용합니다. Clickable 가지고 있다hovered설명 후 링크에 소품으로 전달합니다. 「」, 「」는ClickableLinkin a a a a div에, 「」를 설정할 수 .onMouseEnter ★★★★★★★★★★★★★★★★★」onMouseLeave 하는데.span div이 다르다span를 참조해 주세요. 더 ..

React 함수 구성 요소 또는 사용자 지정 React Hook 함수가 아닌 함수 "app"에서 React Hook "useState"를 호출합니다. 리액트 훅을 사용하여 간단한 문제를 해결하려고 합니다. const [personState,setPersonState] = useState({ DefinedObject }); 다음과 같은 종속성이 있습니다. "dependencies": { "react": "^16.8.6", "react-dom": "^16.8.6", "react-scripts": "3.0.0" } 그래도 다음 오류가 나타납니다. ./src/App.js 7 회선: Hook react-hooks "useState"가 함수 "에서 호출됩니다. 39 § 39: 는 정의되어 있지 . 상태 각 오류에 ..

Create react 앱에서 소스 맵을 생성하는 방법 create-react-app에서 소스 맵을 생성하는 방법을 알고 싶습니다.소스 맵은 암묵적으로 생성됩니까?또한 빌드 폴더에 존재합니까? 웹 팩으로 생성된다는 내용은 많이 읽었는데, 앱이 사용하지 않아서 웹 팩 없이 어떻게 하면 좋을까요? 이젝트도 하고 싶지 않습니다.CRA 매뉴얼에 따르면 소스 맵은 기본적으로 프로덕션모드로 생성됩니다. 단, 이 동작(실가동 모드에서 소스 맵 생성)을 디세블로 하려면GENERATE_SOURCEMAP=false ./node_modules/.bin/react-scripts build또는 이 동작을 영속적으로 하는 경우는, 다음의 몇개의 솔루션을 실행합니다. .env 파일에서 GENERATE_SOURCEMAP=false를..

리액트 라우터의 루트 천이에 대한 응답으로 Redx 액션을 기동하다 최신 앱에서 리액트 라우터와 리덕스를 사용하고 있으며, 현재 url 파라미터와 쿼리에 따라 상태 변경과 관련된 몇 가지 문제에 직면해 있습니다. 기본적으로 URL이 변경될 때마다 상태를 업데이트해야 하는 컴포넌트가 있습니다.이렇게 장식가와의 레덕스로 소품을 통해 주를 넘기고 있다. @connect(state => ({ campaigngroups: state.jobresults.campaigngroups, error: state.jobresults.error, loading: state.jobresults.loading })) 현재 componentWillReceiveProps 라이프 사이클 메서드를 사용하여 리액트라우터로부터의 URL 변..

Jest 및/또는 효소를 사용하여 React 구성요소에 중첩된 요소의 속성을 얻는 방법은 무엇입니까? 리액트 앱에 이미지가 올바르게 로드되었는지 테스트하고 싶습니다.확인하기로 했습니다.src의 속성img요소가 React 구성 요소 내에 중첩됩니다.Jest 테스트 프레임워크와 필요한 경우 효소 테스트 유틸리티를 사용하고 싶습니다. 을 파헤침으로써Object.keys저는 다음과 같은 해결책을 생각해 낼 수 있었습니다.제가 잘 모르는 선은 별표로 표시되어 있습니다. import React from 'react'; import {shallow} from 'enzyme'; import App from './App'; it('should have the logo image', () => { const app = s..

비동기 함수를 onClick in 버튼 응답으로 호출할 수 있습니까? 에서 비동기 함수를 호출합니다.onclick버튼을 클릭합니다.하지만 그것은 효과가 없다.inside 버튼의 비동기 기능을 onlick으로 호출할 수 있습니까? 여기 암호가 있습니다. [ Filter ]단추 const FilterButton = (props) => { return ( Filter ); }; fetch Invoices 비동기 함수 fetchInvoices = async () => { const invoices = await getInvoices(this.currentState.params); this.props.store.dispatch(UpdateInvoices(invoices)); }; 컴포넌트에 함수를 전달하기 위한 ..

React js를 사용하여 사용자가 div의 맨 아래로 스크롤하는 경우 감지 다른 섹션이 있는 웹사이트를 가지고 있습니다.segment.io을 사용하여 페이지의 다양한 액션을 추적하고 있습니다.사용자가 div의 맨 아래로 스크롤한 경우 어떻게 감지합니까?다음을 시도했지만, 페이지 스크롤을 하면 바로 트리거 되는 것 같고, div의 맨 아래에 도달하면 트리거되지 않는 것 같습니다. componentDidMount() { document.addEventListener('scroll', this.trackScrolling); } trackScrolling = () => { const wrappedElement = document.getElementById('header'); if (wrappedElement...