reactjs 37

React에 업로드하기 전에 이미지 미리보기 가져오기

React에 업로드하기 전에 이미지 미리보기 가져오기 여기에 이것의 많은 예들이 있지만 반응을 위한 어떤 것도 찾을 수 없는 것 같다.반응하도록 바닐라 js를 변환했지만 오류가 발생했습니다. 답은 간단해 보이므로, 다음과 같이 응답합니다. getInitialState: function(){ return{file: []} }, _onChange: function(){ // Assuming only image var file = this.refs.file.files[0]; var reader = new FileReader(); var url = reader.readAsDataURL(file); console.log(url) // Would see a path? // TODO: concat files for ..

source 2023.04.03

'create-module-app'이 내부 또는 외부 명령으로 인식되지 않습니다.

'create-module-app'이 내부 또는 외부 명령으로 인식되지 않습니다. Windows PC에서 create-react-app 명령어를 사용하여 리액트 앱을 셋업하려고 합니다.저는 이미 맥컴퓨터로 사용했는데 잘 작동해요.그런데 문제가 생겼어요.여기 명령줄에 대한 내 단계가 있습니다.내가 뭘 빼놓았나요? C:\Windows\system32>cd C:\Users\ugur\Desktop\deneme C:\Users\ugur\Desktop\deneme>npm init This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible de..

source 2023.04.03

효소에서 keyDown Enter 이벤트(또는 기타)를 시뮬레이션하려면 어떻게 해야 합니까?

효소에서 keyDown Enter 이벤트(또는 기타)를 시뮬레이션하려면 어떻게 해야 합니까? 지금 시뮬레이션을 해보려고 합니다.keyDown이벤트, 특히 Enter의 경우keyCode: 13여러 가지 방법을 시도해 봤지만 효과가 없습니다.온라인에서도 찾아봤는데 이 기능은 버그가 있거나 현재 버전의 효소에서는 작동하지 않는 것 같습니다.이 기능이 기능하는지, 기능할 경우 엔트리 또는 기타 유형의 주요 이벤트를 시뮬레이트하기 위한 적절한 구문은 무엇입니까?감사합니다! 현재 가지고 있는 것은 다음과 같습니다만, 동작하고 있지 않습니다. const input = wrapper.find('input'); input.simulate('keyDown', {keyCode: 13}); 현재 효소 버전은 2.4.1입니다...

source 2023.04.03

React의 재료 UI에서 스크롤 가능한 목록 구성 요소

React의 재료 UI에서 스크롤 가능한 목록 구성 요소 List 컴포넌트를 만드는 방법(https://material-ui.com/components/lists/)을 참조하십시오)새로운 ListItem을 추가할 때마다 ListItem이 전개되지만, 내용물이 컨테이너보다 커지면 스크롤할 수 있도록 하고 싶습니다.속성을 추가할 수 있다는 것을 방금 알았습니다.'max Height'와 'Overflow'가 문제를 해결하기 위해 필요했습니다.예를 들어, 용지 컨테이너에 있는 목록의 경우: ... 목록이 컨테이너의 모든 높이를 채우도록 하려면 다음과 같이 하십시오. 언급URL : https://stackoverflow.com/questions/43788878/scrollable-list-component-fro..

source 2023.03.29

리액트를 사용하려고 합니다.바디 스타일을 설정하는 DOM

리액트를 사용하려고 합니다.바디 스타일을 설정하는 DOM 리액트 어떻게 쓰죠?HTML에서 스타일을 변경하려면 DOMbody? 이 코드를 사용했지만 작동하지 않습니다. var MyView = React.createClass({ render: function() { return ( React.DOM.body.style.backgroundColor = "green"; Stuff goes here. ); } }); 브라우저 콘솔에서 실행하면 동작합니다(단, React에서 동작해야 합니다).JS 코드): document.body.style.backgroundColor = "green"; 유사하지만 다른 솔루션에 대해서는 다음 질문을 참조하십시오.ReactJS 및 React Router를 사용하여 각 경로에 따라 ..

source 2023.03.29

JSX에서 문자열 일부를 태그로 바꿉니다.

JSX에서 문자열 일부를 태그로 바꿉니다. 다음과 같이 문자열의 일부를 JSX 태그로 바꾸려고 합니다. render: function() { result = this.props.text.replace(":",); return ( {result} ); } 하지만 그 점을 고려하면this.props.text이Lorem : ipsum그 결과, Lorem [object Object] ipsum. 이 문제를 해결하거나 문자열의 일부를 JSX 태그로 교체하는 다른 방법이 있습니까?2015년에는 받아들여진 답이 잘 먹혔지만, 이제는 더 나은 해결책이 존재합니다. 이 문제로 인해 #3368이 생성되었으며 React에서 일하는 Facebook 직원이 제공한 솔루션을 기반으로 react-string-replace가 생성되..

source 2023.03.29

이 오류 메시지에서 '이 변수를 useEffect 안쪽으로 직접 이동'한다는 것은 무엇을 의미합니까?

이 오류 메시지에서 '이 변수를 useEffect 안쪽으로 직접 이동'한다는 것은 무엇을 의미합니까? 소품을 통해 아이 컴포넌트에 물체를 전달하려고 합니다.이 값은 useEffect 후크에서 설정되며 자녀 컴포넌트에 전달되면 손실됩니다. 다른 함수로 useEffect 훅 외부에 오브젝트 값을 설정하려고 했지만 아직 값이 손실되었습니다. import React, { useState, useEffect } from 'react'; function SetValue(props){ let users = {}; useEffect(() => { users = { user: 'bob' }; }) return } export default SetValue; props.users는 빈 개체 {}이(가) 아니라 {user:..

source 2023.03.29

Django, ReactJS, Webpack 핫 새로고침

Django, ReactJS, Webpack 핫 새로고침 웹팩4의 도움을 받아 장고 안에 리액트 컴포넌트를 설정하려고 합니다. 시작하기 위해 다음 글을 읽었습니다. Django + 핫 새로고침으로 웹 팩을 투명하게 사용할 수 있습니다. 튜토리얼:리액트 기능이 있는 장고 REST (장고 2.0 및 약간의 테스트) 이 두 가지 모두 훌륭합니다.드디어 장고 1.11을 사용하지만 두 번째 링크를 따라가면서 거의 작동하게 되었습니다. 두 번째 링크를 따라가면 문제가 발생했는데, 이 링크를 사용할 때 핫 새로고침이 작동하지 않습니다.webpack-dev-server문제는 Django가 출력 파일을 읽을 수 없다는 것입니다.webpack-dev-server(404 에러)의 경우는,main.js읽을 수 있습니다.제가 ..

source 2023.03.29

리액트 타입 스크립트프로젝트에서의 react-app-env.d.ts의 용도는 무엇입니까?

리액트 타입 스크립트프로젝트에서의 react-app-env.d.ts의 용도는 무엇입니까? 방금 create-react-app 툴로 react typscript 앱을 작성했는데 프로젝트 구조에서 react-app-env.d.ts라는 이름의 파일을 발견했습니다.이 파일의 포포스를 알아야 합니다.이 파일은 Create React App에서 시작된 프로젝트에 고유한 TypeScript 유형 선언을 참조합니다. 이러한 유형 선언은 bmp, gif, jpg, jpg, png, webp 및 svg 등의 리소스 파일 Import 지원을 추가합니다.즉, 다음 Import가 오류 없이 정상적으로 동작합니다. import logo from './logo.svg'; 또한 CSS 모듈 Import 지원도 추가되었습니다.이것은 ..

source 2023.03.29

대응: 키보드 이벤트 핸들러 모든 '특수'

대응: 키보드 이벤트 핸들러 모든 '특수' React를 얻을 수 없습니다.SyntheticKeyboardEvent를 제외한 모든 것을 등록하는 핸들러null이벤트 속성으로 설정합니다. 부품은 단번에 분리하여 어플리케이션과 같은 결과를 얻을 수 있습니다.내가 뭘 잘못하고 있는지 아는 사람 있어? http://jsfiddle.net/kb3gN/1405/ var Hello = React.createClass({ render: function() { return ( Foobar ); }, handleKeyDown: function(e) { console.log(e); }, handleKeyUp: function(e) { console.log(e); }, handleKeyPress: function(e) { co..

source 2023.03.29