반응형

reactjs 27

npm react-facebook-login 설치 시 "ERESOLVE가 의존관계 트리를 해결할 수 없음"

npm react-facebook-login 설치 시 "ERESOLVE가 의존관계 트리를 해결할 수 없음" 「」를 인스톨 중npm react-facebook-login내 리액션 앱에서 계속 의존성 오류가 발생합니까?무섭게 들리네요.앞으로 고장날 수 있는 것을 억지로 설치하고 싶지 않아요.javascript jav 、 떻 jav jav jav jav jav jav jav jav jav jav jav jav? npm 캐시를 지우고 노드 모듈을 제거한 후 다시 설치하려고 시도했지만 여전히 이 오류가 발생합니다. npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: bu..

programing 2023.03.20

React 요소에 대한 고유한 키를 만드는 방법

React 요소에 대한 고유한 키를 만드는 방법 목록을 만들어 저장할 수 있는 리액트 앱을 만들고 있는데, 리액트는 내 요소에 고유한 키 프로펠(Elements List/List Form)이 없다고 경고해왔습니다.사용자가 작성한 요소에 대해 고유한 키 프로포트를 작성하려면 어떻게 해야 합니까?다음은 리액트 코드입니다. var TitleForm = React.createClass({ handleSubmit: function(e) { e.preventDefault(); var listName = {'name':this.refs.listName.value}; this.props.handleCreate(listName); this.refs.listName.value = ""; }, render: function..

programing 2023.03.20

React에서 부모에게 상태를 되돌리는 방법

React에서 부모에게 상태를 되돌리는 방법 제출 버튼이 있는 양식이 있습니다.이 폼은 어떤 상태를 false에서 true로 설정하는 함수를 클릭 시 호출합니다.그런 다음 이 상태를 부모에게 전달하여 참이면 컴포넌트 A를 렌더링하지만 거짓이면 컴포넌트 B를 렌더링합니다. 내가 어떻게 반응하겠어?스테이트나 소품을 사용해야 하는 것은 알지만, 어떻게 사용하는지는 잘 모릅니다.또, 이것은 일방향 흐름의 리액션 원리에 반하는 것입니까? 컴포넌트 A 코드: handleClick(event) { this.setState({ decisionPage: true }); event.preventDefault(); }; 표시되는 내용을 제어하는 상위 구성 요소: return ( {this.props.decisionPage ..

programing 2023.03.20

하위 구성 요소의 업데이트 상태에 대한 변경 이벤트

하위 구성 요소의 업데이트 상태에 대한 변경 이벤트 React 폼(ES6 구문)을 구현하고 각 필드의 onChange 이벤트를 상태 업데이트를 담당하는 컨트롤러 부모 컴포넌트에 전달하는 방법을 알아보려고 합니다.이것은 표준 HTML 요소에서는 정상적으로 동작합니다만, 저는 Datepicker(https://www.npmjs.com/package/react-bootstrap-date-picker)를 날짜 필드에 미리 등록하려고 하고 있습니다만, 같은 방법으로 이벤트를 부모에게 바로 전달할 수 없습니다.이 문제를 해결할 수 있는 간단한 방법이 있을까요? 컨트롤러 컴포넌트 class Parent extends React.Component { constructor (props) { super(props); th..

programing 2023.03.15

반응 - useState - setTimeout 함수에 최신 상태 값이 없는 이유는 무엇입니까?

반응 - useState - setTimeout 함수에 최신 상태 값이 없는 이유는 무엇입니까? 최근에 리액트 훅 작업을 하다가 한 가지 문제/의심 때문에 곤혹스러웠습니까? 다음은 문제를 재현하기 위한 기본적인 구현입니다.여기서 토글하겠습니다flag(상태) 버튼을 클릭했을 때의 변수. const [flag, toggleFlag] = useState(false); const data = useRef(null); data.current = flag; const _onClick = () => { toggleFlag(!flag); // toggleFlag(!data.current); // working setTimeout(() => { toggleFlag(!flag); // does not have latest..

programing 2023.03.15

오류: [PrivateRoute]가 컴포넌트가 아닙니다. 의 모든 구성 요소는 또는이어야 합니다.

오류: [PrivateRoute]가 컴포넌트가 아닙니다. 의 모든 구성 요소는 또는이어야 합니다. React Router v6를 사용하고 있으며 응용 프로그램의 개인 경로를 만들고 있습니다. PrivateRoute.js 파일에는 import React from 'react'; import {Route,Navigate} from "react-router-dom"; import {isauth} from 'auth' function PrivateRoute({ element, path }) { const authed = isauth() // isauth() returns true or false based on localStorage const ele = authed === true ? element : ; r..

programing 2023.03.15

'React Owner만 참조할 수 있다'는 것은 무슨 뜻입니까?

'React Owner만 참조할 수 있다'는 것은 무슨 뜻입니까? 심플한 게 있어요react폼이 있는 컴포넌트: var AddAppts = React.createClass({ handleClick: function() { var title = this.refs.title.getDOMNode().value; .... var appt = { heading: title ... } CalendarActions.addAppointment(appt); }, render: function() { return ( Description ... ); } }); module.exports = AddAppts; 하려고 합니다.render다른 컴포넌트react컴포넌트: var AddAppt = require('./AddAppt..

programing 2023.03.05

AWS에서 NextJS SSR를 사용하여 React 앱을 구축하는 가장 저렴한 방법?

AWS에서 NextJS SSR를 사용하여 React 앱을 구축하는 가장 저렴한 방법? 닫았습니다. 이 질문은의견 기반의현재 답변을 받고 있지 않습니다. 이 질문을 개선하시겠습니까?이 게시물을 편집하여 사실과 인용문으로 답변할 수 있도록 질문을 업데이트하십시오. 1년 전에 문을 닫았어요 커뮤니티는 9개월 전에 이 질문을 재개할지 여부를 검토한 후 종료했습니다. 원래 종료 이유가 해결되지 않았습니다. 이 질문을 개선하다 Nextjs는 서버 기능을 필요로 하는 노드 프레임워크이므로 서버 측 렌더링에 사용하는 것은 S3에서만 호스트할 수 없습니다.하지만, 이는 애플리케이션 전체를 EC2에서 호스팅하는 것(매우 비싼 것)만이 유일한 대안이라는 것을 의미합니까?아니면 다른 중간 솔루션이 있을까요?Next.js SS..

programing 2023.03.05

단일 파일에 대해 더 예쁜 파일 사용 안 함

단일 파일에 대해 더 예쁜 파일 사용 안 함 Vs-code 프로젝트에서 단일 파일(API URL 파일)에 대해 더 예쁜 파일을 비활성화해야 합니다.사실 각 API와 그 URL은 한 줄에 있어야 하는데, 더 예쁜 API는 두 줄로 나누어져 있습니다. 전에 export const GET_SEARCH_TEACHERS = params => myexampleFunction_app_base(`teachers/search/${params.search}`); 끝나고 export const GET_SEARCH_TEACHERS = params => myexampleFunction_app_base(`teachers/search/${params.search}`); 레포의 특정 파일을 더 예쁜 파일로 포맷하지 않으려면 해당 파..

programing 2023.02.23

비동기 대기가 React setState와 연동되는 이유는 무엇입니까?

비동기 대기가 React setState와 연동되는 이유는 무엇입니까? 리액트에 babel이 있는 비동기 wait를 사용하고 있습니다.JS 프로젝트React setState를 사용할 때 편리하다는 것을 알게 되었습니다.이것에 대해 좀 더 이해하고 싶다고 생각하고 있습니다.다음 코드를 고려하십시오. handleChange = (e) => { this.setState({[e.target.name]: e.target.value}) console.log('synchronous code') } changeAndValidate = async (e) => { await this.handleChange(e) console.log('asynchronous validation code') } componentDidUpda..

programing 2023.02.23
반응형