reactjs 31

대응: '리다이렉트'는 'react-router-dom'에서 내보내지 않습니다.

대응: '리다이렉트'는 'react-router-dom'에서 내보내지 않습니다. 행음 i i i 、 음음 、 류 i 、 i i 、 。npm run start터미널에 있습니다. Import 시도 오류: 'Redirect'가 'react-router-dom'에서 내보내지 않았습니다. ★★★★를 했습니다.node_modules,react-router-dom,react-router단말기와 컴퓨터를 재기동했지만, 아직 문제가 발생. 내 코드: import React from 'react'; import { Switch, Redirect } from 'react-router-dom'; import { RouteWithLayout } from './components'; import { Minimal as Minim..

source 2023.02.16

connectedRouter 오류: 상태 트리에서 라우터 리듀서를 찾을 수 없습니다. "router" 아래에 마운트해야 합니다.

connectedRouter 오류: 상태 트리에서 라우터 리듀서를 찾을 수 없습니다. "router" 아래에 마운트해야 합니다. 저는 React.js에 처음 접속하여 베이스 프로젝트를 셋업하고 있었는데 라우팅이 변경되었지만 컴포넌트가 로드되지 않는다는 문제가 하나 있었습니다.구글 검색 후 Connected Router를 사용해야 한다는 것을 알게 되었습니다.Connected Router 설정 중 상태 트리에서 라우터 리덕터를 찾을 수 없습니다. "router" 아래에 마운트해야 합니다. import React from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter } from 'react-router-dom'; import { Con..

source 2023.02.16

왜 useRef가 필요하고 변수는 변경할 수 없는가?

왜 useRef가 필요하고 변수는 변경할 수 없는가? 나는 효과 사용법을 위한 완벽한 가이드 - Swiming Against the Tread at Inspected를 읽었다. 에서는, 의 「」를 가 있는 에 대해 합니다.count , 을할 수 있습니다.useRef래스터로 . function Example() { const [count, setCount] = useState(0); const latestCount = useRef(count); useEffect(() => { // Set the mutable latest value latestCount.current = count; setTimeout(() => { // Read the mutable latest value console.log(`You ..

source 2023.02.16

React.js: jsx를 JavaScript에서 분리하는 방법

React.js: jsx를 JavaScript에서 분리하는 방법 jsx를 컴포넌트의 렌더 함수에서 다른 파일로 이동하는 방법이 있습니까?그렇다면 렌더링 함수의 jsx를 참조하려면 어떻게 해야 합니까?리액트 템플릿을 사용할 수 있습니다.마크업과 컴포넌트 자체를 정확하게 구분할 수 있습니다. 제 요구에 매우 도움이 되었습니다(대규모 웹 앱).템플릿을 다른 파일로 이동할 때의 문제 중 하나는 다음과 같은 핸들러를 사용하는 경우입니다. var myTemplate = ( ); 다음으로 컴포넌트에서 다음을 사용합니다. render: function() { return myTemplate; } 생성된 템플릿코드는 이것을 호출합니다.handleSubmit().따라서 "this"가 잘못되어 핸들러가 동작하지 않습니다.필..

source 2023.02.16

Visual Studio 코드에서 언어를 JSX로 변경

Visual Studio 코드에서 언어를 JSX로 변경 Visual Studio Code는 현재 0.8 버전에서 JSX를 지원하지만 활성화하는 유일한 방법은.jsx파일 확장자언어 모드를 수동으로 변경하는 것은 목록에 없습니다.가장 가까운 옵션은 다음과 같습니다.JavaScriptReact단, JSX 태그는 해석되지 않습니다. 나는 많은 프로젝트를 하고 있다..js파일을 변경할 수 없습니다. JSX 구문을 사용할 수 있는 다른 방법은 없습니까?.jsx내선번호는?사용자 설정 또는 작업영역 설정을 다음과 같이 변경합니다. // Place your settings in this file to overwrite the default settings { "files.associations": { "*.js": "j..

source 2023.02.12

Respect-Intl 입력 플레이스 홀더에서 Formatted Message를 사용하는 방법

Respect-Intl 입력 플레이스 홀더에서 Formatted Message를 사용하는 방법 값을 얻는 방법을 잘 모르겠습니다. 입력과 같은 자리 표시자 형식으로 변환합니다. 실제 자리 표시자에 [Object]가 반환되기 때문입니다.정확한 값을 구할 수 있는 방법이 있나요?그컴포넌트 반응react-intl는 렌더링 시나리오에서 사용하도록 의도되어 있으며 플레이스 홀더, 대체 텍스트 등에서는 사용되지 않습니다.일반 텍스트가 아닌 HTML을 렌더링하므로 시나리오에서는 유용하지 않습니다. 대신,react-intl는 같은 이유로 하위 레벨의 API를 제공합니다.렌더링 컴포넌트 자체는 이 API를 사용하여 값을 HTML로 포맷합니다.시나리오에서는 낮은 레벨을 사용해야 합니다.formatMessage(...)AP..

source 2023.02.12

'컴포넌트는 eslint-react에서 순수한 함수 오류로서 작성되어야 한다'는 것을 어떻게 해결할 것인가?

'컴포넌트는 eslint-react에서 순수한 함수 오류로서 작성되어야 한다'는 것을 어떻게 해결할 것인가? class Option extends React.Component { constructor(props) { super(props); this.handleClickOption = this.handleClickOption.bind(this); } handleClickOption() { // some code } render() { return ( {this.props.option} ); } } 위의 코드를 확인하기 위해 eslint-config-airbnb를 사용했는데 다음과 같은 오류 메시지가 나타납니다.Component should be written as a pure function. 그렇다면 ..

source 2023.02.12

플랫 리스트가 스크롤되지 않는다.

플랫 리스트가 스크롤되지 않는다. FlatList가 포함된 컴포넌트를 표시하는 화면을 만들었습니다.어떤 이유에서인지 목록을 스크롤할 수 없습니다.제 실수를 찾아내서 올바른 방향으로 인도해 줄 수 있는 사람이요? 화면 파일에서 렌더링 기능 및 스타일: render() { return ( ); } } const styles = StyleSheet.create({ container: { flex: 1, overflow: 'hidden', backgroundColor: '#fff', alignItems: 'center', justifyContent: 'flex-start', }, list: { flex: 1, overflow: 'hidden', }, }); 목록 항목 구성요소에서 기능 및 스타일을 렌더링합니다...

source 2023.02.12

react Material-ui. onClick for 버튼을 사용할 수 있는지 어떻게 알 수 있습니까?

react Material-ui. onClick for 버튼을 사용할 수 있는지 어떻게 알 수 있습니까? 문서의 속성 목록은 다음을 포함하지 않습니다.onClick(http://www.material-ui.com/ #/컴포넌트/아이콘 버튼) 클릭 핸들러에 onClick을 사용해야 하는지 어떻게 알 수 있습니까?Material-UI 문서에는 표준 React(네이티브브라우저) 이벤트가 나열되어 있지 않습니다. https://facebook.github.io/react/docs/events.html#mouse-events 이는 사용자가 사용 가능한 기본 이벤트를 이미 알고 있어야 하기 때문입니다.예를 들어 다음과 같이 사용할 수도 있습니다.onWheel모든 네이티브이벤트를 포함하면 장황한 리스트가 됩니다. K..

source 2023.02.12

testing-library-react의 "update was not wraped in act()" 경고를 해결하려면 어떻게 해야 합니까?

testing-library-react의 "update was not wraped in act()" 경고를 해결하려면 어떻게 해야 합니까? 나는 부작용을 일으키는 단순한 부품으로 일하고 있다.내 시험은 통과했지만 경고음이 울리고 있어Warning: An update to Hello inside a test was not wrapped in act(...).. 저도 잘 모르겠어요waitForElement이 시험을 치르는 가장 좋은 방법이에요. 내 컴포넌트 export default function Hello() { const [posts, setPosts] = useState([]); useEffect(() => { const fetchData = async () => { const response = a..

source 2023.02.08