prostudy

TypeScript React.FC 혼선 나는 TypeScript를 배우고 있는데, 일부 비트가 헷갈려.1비트는 다음과 같다. interface Props { name: string; } const PrintName: React.FC = (props) => { return ( {props.name} ) } const PrintName2 = (props: Props) => { return ( {props.name} ) } 위의 두 기능 구성 요소에 대해 TypeScript에서 동일한 JS 코드를 생성한다는 것을 알 수 있다.그PrintName2읽기 쉽도록 구성 요소가 더 능률적으로 보인다.두 정의의 차이점과 두 번째 유형의 리액션 구성 요소를 사용하는 사람이 있는지 궁금하다.대답해줘서 고마워.맞는데 좀 더..

css 모듈을 사용하여 둘 이상의 스타일 이름을 정의하는 방법 css 모듈을 사용하여 요소에 대해 여러 클래스를 사용하려고 한다.이거 어떻게 하지? function Footer( props) { const { route } = props; return ( this site was created by me copyright nz ); } css 모듈을 사용하여 다음과 같이 여러 클래스를 추가할 수 있다. className={`${styles.description} ${styles.yellow}`} 예) function Footer( props) { return ( this site was created by me ); } react-css-modules를 사용하여 일반 클래스 이름 구문을 사용할 수 있다...

ResactJS에서 Hover하는 방법 - onMouseHouse 빠른 Hover 동안 등록되지 않음 반응에서 호버 이벤트 또는 활성 이벤트를 수행하는 방법인라인 스타일링 할 때 JS? 나는 OnMouseEnter, onMouseLeving 접근방식이 버거우니 다른 방법이 있기를 바란다. 특히 구성요소를 매우 빠르게 마우스로 가리키면 onMouseEnter 이벤트만 등록된다.OnMouseLeve는 절대 발사하지 않으므로 상태를 업데이트할 수 없음...구성 요소가 여전히 맴돌고 있는 것처럼 나타나도록 방치하는 경우":능동적인" css 사이비계급을 흉내내려고 해도 나는 같은 것을 알아챘다.정말 빠르게 클릭하면 onMouseDown 이벤트만 등록된다.onMouseUp 이벤트가 무시됨...구성 요소가 활성 상태..

PropTypes DOM 요소를 반응하시겠습니까? 속성을 DOM 요소로 표시하려면 어떻게 해야 하는가? 이 페이지에는 다음과 같이 적혀 있다.PropTypes.element실제로 반응 요소인데, DOM 요소와 동등한 것은 무엇인가?PropTypes.instanceOf(Element) 날 위해 일하는 거야IsRequired를 추가할 수도 있다. PropTypes.instanceOf(Element).isRequired 전달된 속성이 의 인스턴스인지 확인할 수 있다.Element: Element 인터페이스는 문서의 오브젝트를 나타낸다.이 인터페이스는 모든 종류의 요소에 공통되는 방법과 속성을 설명한다.특정 동작은 요소에서 이어받지만 추가 기능을 추가하는 인터페이스에서 설명된다.예를 들어 HTMLlement 인..

재료-UI의 탭과 반응 라우터 4의 통합? 새로운 리액터-라우터 구문에서는Link이동 경로에 대한 구성 요소. 하 지만 material-ui? 내 경우에는 탭들을 주요 항법 시스템으로 사용하고 있어 이론상으로는 다음과 같은 것을 가져야 한다. const TabLink = ({ onClick, href, isActive, label }) => export default class NavBar extends React.Component { render () { return ( {params => } {params => } {params => } ) } } 그러나 그것이 렌더링되면 물질적 의리는 그 아이의 실수를 던진다.Tabsa임에 틀림없다.Tab 하면 좋을까어떻게 진행하면 좋을까? ?isActive턱받이?..

react js의 로컬 JSON 파일을 분석하려면 어떻게 해야 하는가? JSON 파일을 통해 데이터를 모두 검색하여 코드에 사용하는 방법은? 파일 가져오기를 시도하고 콘솔 로깅을 시도했지만 개체 {} 인쇄만 수행됨: import jsonData from "./file.json"; console.log(jsonData); 내 file.json은 다음과 같이 보인다. [ { "id": 1, "gender": "Female", "first_name": "Helen", "last_name": "Nguyen", "email": "hnguyen0@bloomberg.com", "ip_address": "227.211.25.18" }, { "id": 2, "gender": "Male", "first_name": "Ca..

CDN 링크를 사용하여 라이브러리를 reactj로 가져오는 방법 나는 다음과 같이 노력했다. import 'maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'; 그러나 그것은 오류를 발생시킨다.CDN 링크를 내 링크로 가져오는 방법app.js철해 주시겠습니까?다음 행을 html 파일에 포함할 수 있다. 또는 가져오기 명령이 포함된 로컬 스타일시트 파일을 가져올 수 있다.아래 예제를 참조하십시오. 앱.js import './App.scss'; 앱.scss @import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); CDN을 JS에 넣고 묶는 것이 아니라 ..

레이아웃 페이지 또는 페이지당 여러 구성 요소와 함께 반응 라우터 사용 기존 프로젝트에 리액션 라우터를 추가한다. 현재 모델은 서브 내비게이션용 내비게이션 구성 요소와 메인 구성 요소를 포함하는 루트 구성 요소로 전달된다. 내가 찾은 리액션 라우터의 예로는 하위 구성요소가 하나뿐인데, 둘 다에서 레이아웃 코드를 반복하지 않고 여러 하위 구성요소를 변경하는 가장 좋은 방법은 무엇인가?만약 내가 당신을 정확히 이해했다면, 당신은 당신의 안에 여러 구성요소를 정의 할 것이다.Route. 다음과 같이 사용할 수 있다. // think of it outside the context of the router, if you had pluggable // portions of your `render`, you migh..

Create-React-app 프로젝트를 테스트할 때 "ReferenceError: 문서가 정의되지 않음" 이것은 나의 것이다.__tests__/App.js파일: import React from 'react'; import ReactDOM from 'react-dom'; import App from '../src/containers/App'; it('renders without crashing', () => { const div = document.createElement('div'); ReactDOM.render(, div); }); // sanity check it('one is one', () => { expect(1).toEqual(1) }); 그리고 이것은 내가 실행할 때 얻는 출력이다.yarn..

웹 팩 개발 서버에서 모든 경로에 대해 index.html을 제공하도록 지시하는 방법 리액션 라우터를 통해 리액션 앱이/arbitrary/route. 이 방법이 작동하려면 서버가 일치하는 경로로 리액션 앱을 전송해야 한다. 그러나 웹팩 개발 서버는 임의의 엔드포인트를 처리하지 않는다. 여기에 추가적인 익스프레스 서버를 사용하는 해결책이 있다.웹 팩-dev-server가 리액터로부터 진입점을 허용하는 방법 하지만 나는 다른 익스프레스 서버를 가동시켜 경로 매칭을 허용하고 싶지 않다.웹팩 개발 서버에게 URL을 일치시키라고 말하고 내 리액션 앱을 보내줘.다음과 같은 소규모 구성을 포함하는 가장 손쉬운 솔루션을 찾았다. devServer: { port: 3000, historyApiFallback: { ind..