반응형

reactjs 30

모든 fetch() 요청에 대한 기본 헤더 설정

모든 fetch() 요청에 대한 기본 헤더 설정 fetch API를 사용하여 요청마다 기본 헤더를 설정할 수 있습니까? 내가 하고 싶은 것은, 내가 하고 싶은 것은,Authorizationjson Web 토큰이 있을 때마다 헤더로 이동합니다.localStorage현재의 솔루션은 다음과 같은 기능으로 헤더를 설정하는 것입니다. export default function setHeaders(headers) { if(localStorage.jwt) { return { ...headers, 'Authorization': `Bearer ${localStorage.jwt}` } } else { return headers; } } 다음으로, fetch 요구의 헤더를 설정하는 방법은 다음과 같습니다. return fe..

source 2023.03.13

반응 JS의 입력 요소 자동 포커스

반응 JS의 입력 요소 자동 포커스 이 컴포넌트에 렌더링된 입력 태그의 포커스를 자동 설정할 수 없습니다.내가 뭘 놓쳤지? class TaskBox extends Component { constructor() { super(); this.focus = this.focus.bind(this); } focus() { this.textInput.focus(); } componentWillUpdate(){ this.focus(); } render() { let props = this.props; return ( { this.textInput = input; }} onBlur={props.blurFN} /> Imp. Urg. Role Add goal ) } } 어떤 도움이라도 감사합니다.자동 포커스에 사용할 수 ..

source 2023.03.13

React 구성 요소의 부울 상태를 전환하려면 어떻게 해야 합니까?

React 구성 요소의 부울 상태를 전환하려면 어떻게 해야 합니까? React 컴포넌트의 부울 상태를 전환하는 방법을 알고 싶습니다.예: 구성 요소의 생성자에 부울 상태 점검이 있습니다. constructor(props, context) { super(props, context); this.state = { check: false }; }; 체크 박스를 클릭할 때마다, 를 사용해 상태를 전환하려고 합니다.this.setState방법: this.setState({check: !this.state.check.value})}/> Checkbox 사용.check: !check.value즉, RSA는check선언하지 않은 객체입니다. 반대되는 값을 지정할 필요가 있습니다.this.state.check.또한 Rea..

source 2023.03.13

스크립트를 로드할 수 없습니다.Metro 서버를 실행 중이거나 번들 'index.android'인지 확인합니다.bundle'은 릴리즈용으로 올바르게 패키지화되어 있습니다.

스크립트를 로드할 수 없습니다.Metro 서버를 실행 중이거나 번들 'index.android'인지 확인합니다.bundle'은 릴리즈용으로 올바르게 패키지화되어 있습니다. react-native run-android명령어는 Android 시뮬레이터에 메시지를 남기면서 종료됩니다.츠키다 스크립트를 로드할 수 없습니다.Metro 서버를 실행 중이거나 번들 'index.android'인지 확인합니다.bundle'은 릴리즈용으로 올바르게 패키지화되어 있습니다. 내가 뭘 잘못하고 있지?아직 번들러를 시작하지 않았군요. 실행합니다.npm start ★★★★★★★★★★★★★★★★★」react-native start에서 ' 디렉토리'보다 먼저 검색해 주세요.react-native run-android.다음의 스텝이 도..

source 2023.03.08

Jest에서 FileName.css 모듈을 찾을 수 없습니다(identity-obj-proxy로 매핑됨).

Jest에서 FileName.css 모듈을 찾을 수 없습니다(identity-obj-proxy로 매핑됨). 리액트 프로젝트의 테스트 환경을 설정하려고 했는데 CSS 파일을 Import할 때 예기치 않은 토큰에 문제가 발생하여 패키지에 moduleNameMapper를 추가했습니다.고쳐야 하는데 지금 난 이 문제에 직면해 있어이걸 고치려면 내가 뭘 해야 하는지 아는 사람 있어? > myProject@0.0.1 test C:\Users\admin\Documents\myApp > jest FAIL _tests_\Home.test.js ● Test suite failed to run Configuration error: Could not locate module react-datepicker/dist/react-..

source 2023.03.08

reactjs에서 배경 이미지를 설정하는 방법

reactjs에서 배경 이미지를 설정하는 방법 reactjs/webpack 앱을 가지고 있으며, 이 앱의 배경 이미지를 설정하려고 합니다.body태그: body{ background: url("../images/some-background.jpg"); background-size:contain; background-position:top; background: cover; } 단, 컴포넌트를 로드한 후body페이지에 스타일이 없습니다.콘솔에 표시됩니다.웹 팩에 의해 로드된 CSS 파일에 CSS 규칙이 있는 동안 메인 페이지에 배경 이미지를 표시하는 방법이 있습니까?Reactjs가 제가 모르는 일을 해서 그런 건가요?이미지를 저장해야 합니다.public폴더(folder of the folder of you..

source 2023.02.26

리액트 라우터 v4 - GET할 수 없음 *url*

리액트 라우터 v4 - GET할 수 없음 *url* 리액트 라우터 v4를 사용하기 시작했습니다.심플한 게 있어요(아래 코드 참조)로 이동합니다.로 이동하면localhost/vocabulary라우터는 오른쪽 페이지로 리다이렉트 합니다.다만, 그 후에 새로고침(F5)을 눌렀을 때(localhost/vocabulary모든 콘텐츠가 사라지고 브라우저 보고서가 나타납니다.Cannot GET /vocabulary.어떻게 그것이 가능한가요?누가 그 문제(페이지 새로고침)를 해결하는 방법을 가르쳐 줄 수 있나요? App.js: import React from 'react' import ReactDOM from 'react-dom' import { BrowserRouter as Router, Route, Link } f..

source 2023.02.26

React Native의 어레이 맵 함수에서 동적으로 콘텐츠 렌더링

React Native의 어레이 맵 함수에서 동적으로 콘텐츠 렌더링 배열에서 데이터를 가져와 맵 기능을 사용하여 콘텐츠를 렌더링하려고 합니다.보다 **{this.lapsList()}** 및 관련지어져 있는 **lapsList()** 내가 뭘 하려는지 이해할 수 있는 기능이야그 결과 아무것도 표시되지 않습니다(보기 중 보기 등).다음은 간단한 코드입니다. class StopWatch extends Component { constructor(props) { super(props); this.state = { laps: [] }; } render() { return ( coucou test {this.lapsList()} ) } lapsList() { this.state.laps.map((data) => { ..

source 2023.02.26

리액트 훅 내의 오브젝트 배열에서 상태 'onChange'를 업데이트하려면 어떻게 해야 합니까?

리액트 훅 내의 오브젝트 배열에서 상태 'onChange'를 업데이트하려면 어떻게 해야 합니까? 다음을 사용하여 저장된 데이터를 검색했습니다.useState오브젝트 배열에서 데이터는 폼필드로 출력됩니다.이제 입력 시 필드(상태)를 업데이트할 수 있습니다. 사람들이 배열된 속성의 상태를 업데이트하는 예를 본 적이 있지만, 배열된 개체의 상태에 대해서는 본 적이 없기 때문에 어떻게 해야 할지 모르겠습니다.오브젝트 인덱스를 콜백 함수로 전달받았는데 그것을 사용하여 상태를 갱신하는 방법을 알 수 없었습니다. // sample data structure const datas = [ { id: 1, name: 'john', gender: 'm' } { id: 2, name: 'mary', gender: 'f' } ..

source 2023.02.18

Facebook의 react.js 라이브러리 JSX 구문을 jslint로 잘 재생하려면?

Facebook의 react.js 라이브러리 JSX 구문을 jslint로 잘 재생하려면? Facebook의 react.js 라이브러리를 가지고 놀고 있습니다.뷰 작성을 다음과 같이 설명하는 JSX 구문을 사용하려고 합니다. /** @jsx React.DOM */ var HelloMessage = React.createClass({ render: function() { return {'Hello ' + this.props.name}; } }); React.renderComponent(, mountNode); JSLint는 이것을 좋아하지 않는 것이 분명합니다(「식별자」를 예상하고 대신 「

source 2023.02.17
반응형