반응형

reactjs 42

React에서 UseEffect() 내의 비동기 함수를 호출하려면 어떻게 해야 합니까?

React에서 UseEffect() 내의 비동기 함수를 호출하려면 어떻게 해야 합니까? 비동기 함수를 호출하여 UseEffect 결과를 얻고 싶습니다. 인터넷에서 찾은 fetch api 예는 useEffect 함수로 직접 작성되었습니다.URL이 변경되면 모든 가져오기 항목에 패치를 적용해야 합니다. 내가 시도했을 때, 나는 오류 메시지를 받았다. 이건 내 암호야 async function getData(userId) { const data = await axios.get(`http://url/api/data/${userId}`) .then(promise => { return promise.data; }) .catch(e => { console.error(e); }) return data; } functi..

source 2023.03.18

이미지 동적 추가 리액트 웹 팩

이미지 동적 추가 리액트 웹 팩 React와 Webpack을 통해 동적으로 이미지를 추가하는 방법을 찾고 있습니다.src/images 아래에 이미지 폴더가 있고 src/components/index 아래에 컴포넌트가 있습니다.웹 팩에 대해 다음 구성의 URL 로더를 사용하고 있습니다. { test: /\.(png|jpg|)$/, loader: 'url-loader?limit=200000' } 컴포넌트 내에서 컴포넌트를 작성하기 전에 파일 상단에 특정 이미지에 대한 require(image_path)를 추가할 수 있지만 컴포넌트를 범용으로 하여 부모 컴포넌트에서 전달된 이미지의 경로와 함께 속성을 가져오도록 하겠습니다. 내가 시도한 것은: 실제 속성에서는 프로젝트 루트, 리액트 앱 루트 및 컴포넌트 자체에..

source 2023.03.18

create-react-app에서 빌드 실행 후 공백 페이지

create-react-app에서 빌드 실행 후 공백 페이지 netlify에서 create-react-app을 배포하려고 하는데 빌드가 공백 페이지입니다.firebase api key를 로드하기 위해 .env 파일을 사용하고 있는데 빌드 시 문제가 있나요? 컴퓨터에서 로컬로 열려고 해도 빈 페이지가 콘솔에 "file://event-app/static/js/main.1087a0.js"라는 오류가 출력됩니다. 패키지.json: https://gist.github.com/Verthon/f82371ad2bb636b2e95c5b7697aa0bb5 ➜ event-app git:(master) ✗ npm run build > event-app@0.1.0 build /home/jurr/Projects/event-app..

source 2023.03.18

반응 - 다른 구성 요소에 상태를 전달하는 방법

반응 - 다른 구성 요소에 상태를 전달하는 방법 다른 컴포넌트에 상태 변경을 통지하는 방법을 찾고 있습니다.예를 들어 App.jsx, Header.jsx 및 SidebaPush.jsx의 3가지 컴포넌트가 있으며 단순히 onClick으로 클래스를 전환하려고 합니다. 따라서 Header.jsx 파일을 클릭하면 버튼이 2개 표시됩니다.이 경우 상태는 true 또는 false로 바뀝니다.다른 2개의 컴포넌트 App.jsx와 Header.jsx는 이러한 상태 변경에 대해 알아야 합니다.이러한 상태가 변경될 때마다 클래스를 전환할 수 있습니다. App.jsx import React from 'react'; import Header from 'Header'; import classNames from "classnam..

source 2023.03.13

map Dispatch To Props란?

map Dispatch To Props란? Redux 라이브러리의 메뉴얼을 읽고 있었는데, 다음과 같은 예가 있습니다. 컨테이너 컴포넌트는 상태를 읽을 뿐만 아니라 액션을 디스패치할 수 있습니다.로 '어느 정도 '어느 정도', ' 정도'라는 함수도 할 수 .mapDispatchToProps()를 the the the the the the the dispatch() 및 합니다. 당신은 왜가 필요합니까?mapDispatchToProps 있는 mapStateToProps 또, 다음의 편리한 코드 샘플도 제공합니다. const mapDispatchToProps = (dispatch) => { return { onTodoClick: (id) => { dispatch(toggleTodo(id)) } } } 이 기능..

source 2023.03.13

React.cloneElement와 this.props.children은 언제 사용해야 합니까?

React.cloneElement와 this.props.children은 언제 사용해야 합니까? 저는 아직 React에 익숙하지 않습니다.인터넷의 많은 예에서 자녀 요소의 렌더링에 있어서의 이러한 변화를 볼 수 있어 혼란스럽다고 생각합니다.일반적으로는, 다음과 같이 표시됩니다. class Users extends React.Component { render() { return ( Users {this.props.children} ) } } 그런데 이런 예가 있습니다. {React.cloneElement(this.props.children, { key: this.props.location.pathname })} API는 이해했지만 언제 사용해야 하는지 문서에서는 정확히 알 수 없습니다. 그럼 다른 사람은 ..

source 2023.03.13

React Native에서 버튼을 추가하는 방법

React Native에서 버튼을 추가하는 방법 이 모든 "CSS 없음"에 대해 혼란스럽지만, 그게 왜 도움이 되는지 이해합니다.화면 중앙에 버튼만 배치하고 싶은데 리액트에서의 스타일링은 아직 잘 모르겠어요.코드는 다음과 같습니다. var tapSpeed = React.createClass({ render: function() { return ( Tap me as fast as you can! ! ); } }); var styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#FFCCCC' }, welcome: { fontSize: 20, textAli..

source 2023.03.13

Strict 모드로 인해 My React 컴포넌트가 두 번 렌더링됩니다.

Strict 모드로 인해 My React 컴포넌트가 두 번 렌더링됩니다. My React Component가 두 번 렌더링 중입니다.그래서 라인별로 디버깅을 실행하기로 했습니다.문제는 다음과 같습니다. if ( workInProgress.mode & StrictMode) { instance.render(); } React-dom.development.js 모드 때문에 그런가?비활성화할 수 있나요?Strict 모드란?내가 필요할까?StrictMode는 코드의 문제를 감지하고 경고(매우 유용할 수 있음)하기 위해 구성 요소를 두 번 렌더링합니다. 앱에서 StrictMode를 사용하도록 설정했지만 사용하도록 설정하지 않은 경우, 처음에 앱을 만들 때 create-react-app 등을 사용하여 StrictMo..

source 2023.03.13

요소 유형이 잘못되었습니다. 문자열(내장 구성 요소) 또는 클래스/함수가 필요합니다.

요소 유형이 잘못되었습니다. 문자열(내장 구성 요소) 또는 클래스/함수가 필요합니다. import React from 'react'; import ReactDOM from 'react-dom'; import Map from './components/map/container/map'; import App from './App'; import './index.css'; import shell from './shared/utility/shell'; import { render } from 'react-dom' import { Provider } from 'react-redux' import { createStore, applyMiddleware, compose } from 'redux' import { rou..

source 2023.03.13

react에 노드가 정말로 필요한가?프런트 엔드 ENV의 JS?

react에 노드가 정말로 필요한가?프런트 엔드 ENV의 JS? 리액션은 처음입니다.저는 저의 작은 hello world 예를 시작하려고 합니다. 대부분의 튜토리얼은 다음과 같은 기능을 제공합니다. app.module var React = require('react'); var ReactDOM = require('react-dom'); var reactElement = React.createElement('h1', { className: 'header' }, 'This is React'); ReactDOM.render(reactElement, document.getElementById('react- application')); index.displaces를 표시합니다. I am about to learn..

source 2023.03.08
반응형