반응형

reactjs 35

react-router 4 및 styled-component in react를 사용할 때는 라우터 외부에서 Route 또는 withRouter()를 사용하지 마십시오.

react-router 4 및 styled-component in react를 사용할 때는 라우터 외부에서 Route 또는 withRouter()를 사용하지 마십시오. 첫 번째 포트폴리오 웹사이트를 구축하려고 하는데 리액트-라우터-돔 4.2.2와 스타일-컴포넌트 2.2.3을 사용하여 루팅을 하게 되었습니다. 오류 메시지:라우터 외부에서 Route 또는 with Router()를 사용하지 마십시오. NavLink 대신 Link를 사용하려고 했지만 오류도 발생하였습니다(라우터 외부 링크 사용 안 함). 누가 좀 도와주세요. 네비게이션 Bar.js import React, { Component } from 'react'; import { NavigationContainer, NavItem } from './n..

programing 2023.03.09

create-react-app은 언제 코드를 난독화 또는 최소화합니까?

create-react-app은 언제 코드를 난독화 또는 최소화합니까? webpack에 대한 기본적인 질문이 있어 도움말(코드 난독화/업글라이제이션에 대하여)을 이용할 수 있는 반응을 보이고 있습니다. 사용하고 있다create-react-app(실행 후) 운용용 번들빌드를 작성하는 것 같습니다.yarn build). 그리고 그 파일에는 모든 것이 메인에 담겨 있는 것 같습니다.JS 파일 및 메인.CSS 파일 등저는 "파이어베이스 전개"를 사용하여 라이브를 푸시합니다(저의 경우).나는 내 코드를 위화시켜 어떤 개발자도 완전히 읽을 수 없게 하고 싶다. 그런데 Chrome에서 앱을 보면 메인 화면이 안 나와요.JS 또는 기타 번들파일모든 개별 파일과 내가 작성한 코드를 정확하게 보여줍니다.왜 그런 줄 알아?..

programing 2023.03.04

클릭: 작동하지 않음 반응 js

클릭: 작동하지 않음 반응 js 사용자가 div를 클릭하면 함수를 호출하려고 합니다(onClick in react 사용).지금은 어떤 논쟁도 할 필요가 없습니다. 함수만 부르면 됩니다.제가 모르는 것에 대해 미리 사과드립니다.감사해요. var Test = React.createClass({ btnTapped: function(){ console.log('tapped!'); }, render: function() { var stationComponents = this.props.stations.map(function(station, index) { return {station}; }); return {stationComponents}; } }); var cards = ["amazon", "aeo", "ae..

programing 2023.03.04

스타일 컴포넌트 대 SCSS(SCSS) 이하

스타일 컴포넌트 대 SCSS(SCSS) 이하 닫혔어. 이 질문은 좀 더 자세히 설명해야 합니다.초점을 맞춥니다.현재 답변을 받고 있지 않습니다. 이 질문을 개선하시겠습니까?이 게시물을 편집하여 하나의 문제에 초점을 맞추도록 질문을 업데이트하십시오. 3년 전에 문을 닫았어요 이 질문을 개선하다 우연히 리액트를 발견했다.JS보일러플레이트는 평판이 좋고 커뮤니티에 의해 구동됩니다.스타일링 섹션은 스타일링 컴포넌트 CSS를 더욱 강조했지만 기존 CSS 스타일링 방법론으로의 전환을 멈추지 않았습니다.이 때문에 스타일드 컴포넌트 CSS의 특징과 채택이 필요한 이유에 관심이 쏠렸습니다. 스타일 컴포넌트 CSS에 대한 이해: 컴포넌트 중심 아이디얼로지CSS도 컴포넌트입니다.- 이거 정말 멋지다! 필요한 것을 적재하고 ..

programing 2023.03.04

프로그래밍 방식으로 포커스 입력에 반응하는 방법

프로그래밍 방식으로 포커스 입력에 반응하는 방법 매우 간단한 사용 사례인 UI 기능을 구현하려고 합니다. 내용물이 들어 있는 라벨이 있습니다. 클릭하면 텍스트 입력이 사용 가능한 라벨의 내용으로 대체됩니다. 사용자는 콘텐츠를 편집할 수 있습니다. Enter 키를 누르면 입력이 숨겨지고 업데이트된 내용과 함께 레이블이 반환됩니다. 드디어 (사실 MongoBD 백엔드, 레덕스 등을 사용하여) 모든 것을 정확하게 할 수 있었고, 유일하게 할 수 없었던 것(구글 검색과 S.O 읽기 하루 종일 지불)을 할 수 있었습니다.F 유사 투고)는 다음과 같습니다. 텍스트 입력이 나타나면 포커스를 전송할 수 없습니다!처음에는 이렇게 피곤했어요. {this.state.word} 그러나 자동 포커스는 확실히 작동하지 않았습니다..

programing 2023.03.04

React 앱을 서버의 서브 디렉토리에 번들하려면 어떻게 해야 합니까?

React 앱을 서버의 서브 디렉토리에 번들하려면 어떻게 해야 합니까? 로컬 호스트에서 개발한 리액트 앱이 있습니다.vensa라는 서브디렉토리에 복사하고 싶습니다. 웹 팩 구성 파일은 다음과 같습니다. const ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { entry: [ './src/index.js' ], output: { path: 'build', filename: 'bundle.js' }, module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel' }, { test: /\.scss$/, loader: ExtractTextP..

programing 2023.03.04

로컬 파일로 요청을 가져올 수 없습니다.

로컬 파일로 요청을 가져올 수 없습니다. 로컬 파일로 요청하려고 하는데 컴퓨터에서 언제 하려는지 모르겠어요. 오류 표시해 주세요.프로젝트 내의 파일로 페치가 가능합니까? // Option 1 componentDidMount() { fetch('./movies.json') .then(res => res.json()) .then((data) => { console.log(data) }); } error: Uncaught (in promise) SyntaxError: Unexpected token .then(res => res.json()) // Option 2 componentDidMount() { fetch('./movies.jso..

programing 2023.02.27

기능에 대한 Jest Spy

기능에 대한 Jest Spy Mocha에서 Jest로 스와프하고 있는데, 리액트 방식으로 스파이 할 수 있는 방법이 있는지 궁금합니다.예를 들어 내 컴포넌트에 다음과 같은 메서드가 있다고 가정해 보겠습니다.sdk라이브러리는 jQuery Ajax 호출만 구성합니다). getData() { sdk.getJSON('/someURL').done(data => { this.setState({data}); }); } Sinon을 사용하여 다음과 같이 프로토타입을 염탐하여 테스트합니다. it('should call getData', () => { sinon.spy(Component.prototype, 'getData'); mount(); expect(Component.prototype.getData.calledOnc..

programing 2023.02.27

React의 레스트 소품용 TypeScript 회피책

React의 레스트 소품용 TypeScript 회피책 TypeScript 2.1용으로 갱신되었습니다. TypeScript 2.1은 오브젝트 확산/휴식을 지원하므로 더 이상 회피책이 필요하지 않습니다. 첫 번째 질문 TypeScript는 컴포넌트에서 렌더링된 HTML 요소로 HTML 속성을 전달하기 위해 React에서 일반적으로 사용되는 JSX 확산 속성을 지원합니다. interface LinkProps extends React.HTMLAttributes { textToDisplay: string; } class Link extends React.Component { public render():JSX.Element { return ( {this.props.textToDisplay} ); } } 그러나 알..

programing 2023.02.22

CssBaseline 클래스의 역할은 무엇입니까?

CssBaseline 클래스의 역할은 무엇입니까? Material-UI React 라이브러리의 CssBaseline 클래스가 무엇을 하는지 궁금했는데, 어디에서도 답을 찾을 수 없고, 제가 링크한 페이지도 클래스가 무엇을 하는지 별로 설명해주지 않습니다.이 부품이 어떤 역할을 하는지 아는 사람 있나요?CssBaselineCSS 리셋이 추가되어 있습니다.를 참조해 주세요.normalize.css와 같은 접근법에 익숙한 경우 기본 요소에 기본 시각적 스타일링을 추가하고 패딩을 재설정하는 방법 등이 있습니다. Material-UI는 주로 CssBasline.js에서 볼 수 있듯이 몇 가지 리셋 스타일을 제공합니다.box-sizing본문 글꼴 색상과background색. '@global': { html: { W..

programing 2023.02.22
반응형