반응형

ReactJS 27

리액트 및 노드에 대해 프록시가 작동하지 않음

리액트 및 노드에 대해 프록시가 작동하지 않음 설정한 프록시에 문제가 있습니다. 이것은 나의 루트 패키지입니다.json 파일: "scripts": { "client": "cd client && yarn dev-server", "server": "nodemon server.js", "dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\"" } 내 클라이언트 패키지json 파일: "scripts": { "serve": "live-server public/", "build": "webpack", "dev-server": "webpack-dev-server" }, "proxy": "http://localhost:5000/" 서버 측에서..

programing 2023.03.13

컴포넌트의 렌더 어레이를 리액트

컴포넌트의 렌더 어레이를 리액트 질문 하나 할게요.컴포넌트 배열 렌더링 할 줄 아는 사람?개발자가 특정 컴포넌트를 쉽게 변경할 수 있도록 합니다.(대시보드 같은 거죠) 컴포넌트 리스트파일 import React from 'react'; export default [ ]; 대시보드 컴포넌트 import React from 'react'; import components from './../../components'; export default class Dashboard extends React.Component { render = () => { //Want to render the array of components here. return ( {components} ); }; } 문제는 키를 추가해야 하..

programing 2023.03.08

대응: 기존 컴포넌트에 소품 추가

대응: 기존 컴포넌트에 소품 추가 기존 요소를 추가 소품으로 복제하는 방법을 찾고 있습니다. 참조용: this.mainContent = 저는 이런 걸 하려고 했는데 React.createElement(this.mainContent, Object.assign({}, this.mainContent.props, { anotherMessage: "nice to meet ya!" })); 효과가 없어요. 어떻게 하면 좋을까요?요소를 복제하고 다음을 사용하여 추가 소품을 추가해야 합니다. const ClonedElementWithMoreProps = React.cloneElement( this.mainContent, { anotherMessage: "nice to meet ya!" } ); // now render..

programing 2023.03.08

반응 제어 구성 요소와 제어되지 않는 구성 요소란 무엇입니까?

반응 제어 구성 요소와 제어되지 않는 구성 요소란 무엇입니까? ReactJ에서 제어되는 구성 요소와 제어되지 않는 구성 요소는 무엇입니까?그들은 서로 어떻게 다릅니까?이는 스테이트풀한 DOM 컴포넌트(폼 요소)와 관련되어 있으며 React 문서에서는 그 차이를 설명합니다. 제어된 컴포넌트는 현재 값을 다음과 같이 취득하는 컴포넌트입니다.props.onChange부모 컴포넌트는 콜백을 처리하여 자신의 상태를 관리하고 새로운 값을 제어된 컴포넌트에 전달함으로써 콜백을 "제어"합니다.이를 "덤 컴포넌트"라고도 할 수 있습니다. Uncontrolled Component는 자체 상태를 내부에 저장하는 컴포넌트입니다.또, 다음의 명령어를 사용해 DOM 에 문의합니다.ref이데올로기 때문에HTML에 더 가깝습니다.H..

programing 2023.03.08

타이프스크립트:리액트에 이력 오브젝트의 타입 체크를 추가하는 방법

타이프스크립트:리액트에 이력 오브젝트의 타입 체크를 추가하는 방법 이력 오브젝트를 소품으로 받는 코드는 다음과 같습니다. const ChildComponent = ({ history }) => ( history.push(routes[4].path)}> Click me ); 이 이력 프로포트의 타입 체크를 추가하려면 어떻게 해야 합니까?이 이력 프로포트의 부모에 라우터 HOC를 붙이면 됩니다.제가 생각할 수 있는 한 가지 방법은 다음과 같은 것을 쓰는 것입니다. interface Props { history: { push(url: string): void; }; } 하지만 나는 이것이 올바른 방법이 아니라고 확신한다. 왜냐하면 역사 물체의 나머지 재산들이 손실되고 있기 때문이다. 올바른 방법을 제안해 주시..

programing 2023.02.26

리액트 프로젝트에 SCSS 스타일을 추가하는 방법

리액트 프로젝트에 SCSS 스타일을 추가하는 방법 이제 막 리액트(JavaScript에 관한 지식도 조금 습득 중)를 배우고 첫 번째 프로젝트를 구축하기 시작했습니다.html CSS/SCSS 학습 프로젝트에서 얻은 지식과 이해를 바탕으로 CSS/SCSS를 사용하여 첫 번째 리액트 프로젝트에 스타일을 추가하는 방법을 알고 싶습니다. 리액트 프로젝트에 SCSS를 추가하려면 어떻게 해야 합니까?create-react-app을 사용하는 경우: 1) npm을 사용하여 먼저 sass 의존관계를 설치합니다. npm install sass --save-dev 2) sass 파일을 componentName.js 파일로 Import합니다. import '../scss/FileName.scss';scss를 사용하는 방법은 ..

programing 2023.02.26

React를 사용하여 인라인 글꼴 크기 스타일 생성JS

React를 사용하여 인라인 글꼴 크기 스타일 생성JS 리액트에서 이런 걸 하려고 하는데JS: var MyReactClass = React.createClass({ render: function() { var myDivText = "Hello!"; var myFontSize = 6; //this is actually something more complicated, I'm calculating it on the fly var divStyle = { font-size: {fontSize + 'px !important;'}, }; return ({myDivText}); } }); 이 문제는 코드를 실행하면 "Module build failed:오류: 해석 오류: 줄 5: 예기치 않은 토큰 -" 분명히 Rea..

programing 2023.02.26

저장 상태 변경 시 React-redux 구성 요소가 다시 렌더링되지 않음

저장 상태 변경 시 React-redux 구성 요소가 다시 렌더링되지 않음 오늘은 리액션과 리덕스를 배우려고 합니다만, 상태 변화 후에 컴포넌트를 강제로 리렌더 하는 방법을 알 수 없습니다. 코드는 다음과 같습니다. const store = createStore(loginReducer); export function logout() { return {type: 'USER_LOGIN'} } export function logout() { return {type: 'USER_LOGOUT'} } export function loginReducer(state={isLogged:false}, action) { switch(action.type) { case 'USER_LOGIN': return {isLogged:..

programing 2023.02.26

리액트 컴포넌트 'displayName'의 용도는 무엇입니까?

리액트 컴포넌트 'displayName'의 용도는 무엇입니까? 리액션 컴포넌트의 이름을 붙이는 것이 좋은 프랙티스로 간주되는 것을 알고 있습니다.displayName사유지는 알 수 없지만요React 문서에는 다음과 같이 표시됩니다. displayName 문자열은 메시지 디버깅에 사용됩니다.JSX는 이 값을 자동으로 설정합니다. 자세한 내용은 JSX를 참조하십시오. 이게 왜 그렇게 중요하죠?추가하지 않으면 어떻게 됩니까? (지금까지 추가하지 않고 디버깅에 문제가 없었습니다.) 컴포넌트 이름을 붙이는 방법에 대한 권장사항/우수사례가 있습니까?나는 항상 준비해왔다.displayName같은 이름으로 지정합니다.이것은 실제 가동 빌드에서 데드코드 제거를 통해 삭제되므로 개발 빌드에서 사용되었을 수 있으며 애플리케..

programing 2023.02.26

리액트 네이티브에서 스타일의 기본 단위는 무엇입니까?

리액트 네이티브에서 스타일의 기본 단위는 무엇입니까? 저는 리액트 네이티브용 재료 디자인을 개발하고 있는 오픈 소스 프로젝트에 참여하고 있습니다.회사에서 차단되어 있어 패딩, 정렬 등을 통한 UI 레벨 향상을 할 수 없습니다. 이것은 서랍을 위한 재료 설계의 공식 사양입니다. 위 이미지에서 측정 단위는 dp입니다. 하지만 리액트 네이티브 코드에는 그런 단위가 없습니다."react native"라고 생각하면 px인지 dp인지 헷갈립니다. React Native for Style의 Official Docs 구성 요소도 검토했습니다.어디에도 언급이 없네요. 내 코드는 다음과 같습니다. const styles = { touchable: { paddingHorizontal: 16, marginVertical: 8..

programing 2023.02.26
반응형