probook

Typescript에서 createContext 문제를 해결하시겠습니까? React Context + Typescript에 매우 이상한 문제가 있습니다. 작업 예 위의 예에서는 실제로 무엇을 하려고 하는지 알 수 있습니다.기본적으로 새로운 use Context 메서드로 상태를 관리하고 있으며 완벽하게 작동합니다. 다만, 이것을 박스로 실행하려고 해도, useReducer 를 통과하는 상태 값을 찾을 수 없는 것 같습니다. export function AdminStoreProvider(props: any) { const [state, dispatch] = useReducer(reducer, initialState); // state.isAuth is avail here // state.user is ava..

리액트 라우터에서 페이지 새로 고침 시에도 로그 상태를 유지하는 방법은 무엇입니까? 리액트, 리액트 라우터, 리덕스로 웹사이트를 만들고 있습니다.많은 루트(페이지)에서는 사용자가 로그인해야 합니다.사용자가 다음과 같이 로그인하지 않으면 로그인 페이지로 리디렉션할 수 있습니다. function requireAuth(nextState, replace) { let loggedIn = store.getState().AppReducer.UserReducer.loggedIn; if(!loggedIn) { replace({ pathname: '/login', state: { nextpathname: nextState.location.pathname } }); } } ReactDOM.render( ... some ot..

React에서 객체 배열 정렬 및 렌더링 정보가 포함된 객체 배열이 있습니다.원하는 순서대로 렌더링할 수 없기 때문에 도움이 필요합니다.다음과 같이 렌더링합니다. this.state.data.map( (item, i) => {item.matchID} {item.timeM} {item.description} ) 오름차순 정렬이 가능합니까?item.timeM그런 점에서map()- 기능 또는 맵을 사용하기 전에 정렬해야 합니까? 이것은, 고객이 찾고 있는 것이기도 합니다. // ... rest of code // copy your state.data to a new array and sort it by itemM in ascending order // and then map const myData = [].c..

여러 레이아웃으로 리액트 라우터 v4 퍼블릭 레이아웃 내에서 루트 중 일부를 렌더링하고 프라이빗 레이아웃 내에서 다른 루트를 렌더링하고 싶은데 깔끔한 방법이 있을까요? 분명히 효과가 없는 예이지만, 제가 찾고 있는 것을 대략적으로 설명해 주셨으면 합니다. 레이아웃을 특정 경로로 전환하고 싶은데 새로운 리액트 라우터에서 어떻게 전환해야 합니까? 루트를 네스트 하면 기능하지 않게 되어, 다음의 에러가 표시됩니다. You should not use and in the same route; will be ignored 편집: 레이아웃이 루트 그룹 전체를 랩하도록 하는 것은 동일한 프라이빗/퍼블릭 루트 그룹에 있는 한 레이아웃이 한 번만 렌더링됨을 의미합니다.예를 들어 레이아웃을 사용하여 각 페이지를 레이아웃으로..

Typescript에서 인터페이스를 구현할 때 개인 속성을 정의하는 방법은 무엇입니까? 프로젝트에서 TypeScript를 사용하고 있는데 문제가 발생했습니다.다음과 같은 인터페이스를 정의합니다. interface IModuleMenuItem { name: string; } 이 인터페이스에서 구현되는 클래스를 만들고 싶은데 다음과 같은 개인 속성으로 이름을 지정합니다. class ModuleMenuItem implements IModuleMenuItem { private name: string; } 다음의 에러가 표시됩니다. Class ModuleMenuItem이 인터페이스 IMocheduleMenuItem을 잘못 구현했습니다.ModuleMenuItem 유형에서는 속성 이름이 비공개이지만 IMochedul..

Redx에서 직접 "store.dispatch"가 아닌 "this.props.dispatch"를 사용하는 이유는 무엇입니까? store.dispatch를 직접 사용해도 손해는 없습니까? (모든 하위 컴포넌트에서 사용할 수 있기 때문에) 전화하기가 훨씬 쉬워 보입니다.지금까지의 테스트에서는 아직 차이를 찾을 수 없습니다. 감사합니다!범용 앱에서는 요청마다 다른 스토어 인스턴스를 원합니다.일부 모듈에서 스토어를 싱글톤으로 내보내는 경우 서버 렌더링을 추가하는 데 어려움이 있습니다. 그렇기 때문에 문서에서 싱글톤스토어를 권장하지 않고 항상 를 사용하여 React 컨텍스트를 통해 계층으로 전달하도록 권장하고 있습니다.이렇게 하면 단 1톤도 사용하지 않고 소모성 컴포넌트를 저장할 수고를 덜 수 있습니다. Reac..

ESLint with React에서 "no-used-vars" 오류가 발생함 셋업 완료eslint&eslint-plugin-react. ESLint를 실행하면 린터가 반환됩니다.no-unused-vars각 React 컴포넌트에 대한 오류입니다. JSX 또는 React 구문을 사용하고 있는 것이 인식되지 않는 것 같습니다.좋은 생각 있어요? 예: app.module import React, { Component } from 'react'; import Header from './header.js'; export default class App extends Component { render() { return ( {this.props.children} ); } } 린터 오류: /my_project/src/..

React.Children.map 재귀적으로? HTML 폼을 렌더링하기 위해 리액트 컴포넌트를 만들고 있는데 특정 유형의 하위 컴포넌트에 추가 소품을 추가하기 위해 부모 폼 컴포넌트의 모든 하위 컴포넌트를 반복적으로 반복해야 합니다. 예(JSX의 경우): Personal Information Enter Your Birthday 이 예에서는 React를 사용하고 있습니다.Form 컴포넌트 내의 Children.map, 다음으로 맵 함수 내의 Children.map을 통해 아이의 "type"과 아이의 "type.displayName"을 체크하여 내가 다루고 있는 요소(네이티브 HTML 요소 또는 ReactElement 중 하나)를 결정합니다. var newChildren = React.Children.map..

React + Redux에서 중첩된 컴포넌트의 소품 업데이트를 최적화하는 방법 코드 예: https://github.com/d6u/example-redux-update-nested-props/blob/master/one-connect/index.js 라이브 데모 보기:http://d6u.github.io/example-redux-update-nested-props/one-connect.html 네스트된 컴포넌트의 소품 업데이트를 최적화하려면 어떻게 해야 합니까? 위의 컴포넌트인 Repo와 RepoList가 있습니다.첫 번째 repo(14호선)의 태그를 갱신하고 싶습니다.그래서 제가 파견을 했습니다.UPDATE_TAG★★★★★★★★★★★★★★★★★★★를 실장하기 전에shouldComponentUpdate에..

Reactjs를 사용하여 스크롤 위치 가져오기 reactjs를 사용하여 스크롤을 처리하고 싶다.click이벤트입니다. 먼저, 저는 다음 게시물 목록을 작성했습니다.componentDidMount. 둘째, byclick event리스트내의 각 투고에는, 투고 상세가 표시되고, 톱까지 스크롤 됩니다(투고 상세를 페이지의 톱 위치에 배치하고 있기 때문입니다). 셋째,"close button"게시물에 대한 자세한 내용은 이전 게시물 목록을 반환하지만 클릭된 게시물의 위치까지 정확히 웹 사이트를 스크롤합니다. 사용법은 다음과 같습니다. 이벤트를 클릭하여 게시 세부 정보를 봅니다. inSingle = (post, e) => { this.setState({ post: post, theposition: //How to..