반응형

ReactJS 31

React-router TypeError: _this.props.이력이 정의되지 않았습니다.

React-router TypeError: _this.props.이력이 정의되지 않았습니다. react js 및 i가 포함된 react-router를 사용하고 있지만 이 오류가 발생합니다. 컴파일 중에 에러가 표시됩니다. TypeError: _this.props.history is undefined 이것은 나의 index.filename 파일입니다. import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import './index.css'; import { Router, Route, browserHistory, IndexRoute } from 'react-router'; ReactDOM.render( , ..

programing 2023.03.13

React.js에 로컬 영상 로드

React.js에 로컬 영상 로드 를 사용하여 했습니다.create-react-app이루어졌지만, 컴포넌트)에Header.js 경로: , "파일 경로":src/components/common/Header.js로딩되지 않습니다.을 사용하다 import React from 'react'; export default () => { var logo1 = ( ); return ( {logo1} ); } 를 「Do I to 」라고 쓰면,src={require('./src/images/logo.png')} 집에서는logo1 에러가 됩니다. 컴파일하지 못했습니다. ./src/Components/Common/Header.js 오류 모듈을 찾을 수 없습니다. /var/www/html/wistful/src/Component..

programing 2023.03.13

react.js의 인스턴스 v 상태 변수

react.js의 인스턴스 v 상태 변수 react.js에는 타임아웃 참조를 인스턴스 변수(this.timeout)와 상태 변수(this.state.timeout) 중 어느 것으로 저장하는 것이 좋습니까? React.createClass({ handleEnter: function () { // Open a new one after a delay var self = this; this.timeout = setTimeout(function () { self.openWidget(); }, DELAY); }, handleLeave: function () { // Clear the timeout for opening the widget clearTimeout(this.timeout); } ... }) 또는 Rea..

programing 2023.03.13

react-select: 검사기에서 스타일링할 때 드롭다운을 열어두는 방법?

react-select: 검사기에서 스타일링할 때 드롭다운을 열어두는 방법? 리액트 셀렉트를 사용 중이고 커스터마이즈 중인데 이 일을 할 수 있는 옵션을 찾지 못했어요스타일링을 할 때 드롭다운을 열어둘 수 있는 방법이 있습니까?Chrome에서 [Elements]> [ Event Listeners ]> [ open " blur " ]를 마우스로 열고 [Document]라고 써있는 곳 우측으로 이동하면 [Remove]버튼이 표시됩니다.V2를 사용하는 경우menuIsOpen메뉴를 항상 열어두기 위해 사용할 수 있습니다. Chrome을 사용하고 React Developer Tools 플러그인이 있는 경우 콘솔의 React 탭에서 구성 요소를 검사하고 브라우저에서 이 속성을 수동으로 전환할 수 있습니다.V1의 경..

programing 2023.03.08

TypeScript에서 반응 상태 사용

TypeScript에서 반응 상태 사용 TypeScript는 처음입니다.표시에 문제가 있습니다.this.state.something렌더 메서드 내부 또는 함수 내부 변수에 할당하는 방법. 가장 중요한 코드를 살펴봅니다. interface State { playOrPause?: string; } class Player extends React.Component { constructor() { super(); this.state = { playOrPause: 'Play' }; } render() { return( this.playPause = playPause} title={this.state.playOrPause} // in this line I get an error > Play ); } } 에러는 다음..

programing 2023.03.08

단락(&) 조건부 성분으로 아무것도 아닌 0을 나타내는 반응

단락(&) 조건부 성분으로 아무것도 아닌 0을 나타내는 반응 컴포넌트 또는 아무것도 표시되지 않는 다음과 같은 간단한 단락 스테이트먼트가 있습니다. {profileTypesLoading && } 스테이트먼트가 false일 경우 이 스테이트먼트는0아무것도 없는 대신. 나는 한 적이 있다console.log(profileTypesLoading)어떤 상태인지 빨리 보기 위해서profileTypesLoading속성은 1 또는 0 중 하나입니다.0은 false여야 합니다...아무것도 렌더링할 수 없습니다.그렇죠? 왜 이런 일이 일어났는지 아십니까?상태가 거짓이기 때문에 두 번째 인수는 반환되지 않습니다.)가 반환됩니다.profileTypesLoading리액트는 또는boolean 에 대해 렌더링을 건너뛰고 또는st..

programing 2023.03.08

react use객체 비교 효과

react use객체 비교 효과 리액트 사용 중useEffect후크 및 객체 변경 여부를 확인한 후 후 후크를 다시 실행합니다. 제 코드는 이렇게 생겼어요. const useExample = (apiOptions) => { const [data, updateData] = useState([]); useEffect(() => { const [data, updateData] = useState([]); doSomethingCool(apiOptions).then(res => { updateData(response.data); }) }, [apiOptions]); return { data }; }; 안타깝게도 객체가 동일한 것으로 인식되지 않기 때문에 계속 실행됩니다. 그 이유는 다음과 같습니다. const o..

programing 2023.02.26

리액트 훅을 사용하여 소품을 상태와 동기화하는 방법: setState()

리액트 훅을 사용하여 소품을 상태와 동기화하는 방법: setState() 컴포넌트가 받는 소품을 사용하여 React hook setState()를 사용하여 상태를 설정하려고 합니다.다음 코드를 사용해 보았습니다. import React,{useState , useEffect} from 'react'; const Persons = (props) => { // console.log(props.name); const [nameState , setNameState] = useState(props) console.log(nameState.name); console.log(props.name); return ( My name is {props.name} and my age is {props.age} My profe..

programing 2023.02.26

React의 useState() 훅을 사용하여 컴포넌트 간에 상태를 공유할 수 있습니까?

React의 useState() 훅을 사용하여 컴포넌트 간에 상태를 공유할 수 있습니까? 리액트의 새로운 후크 기능을 실험하고 있었습니다.다음의 2개의 컴포넌트가 있는 것을 고려합니다(리액트 훅 사용). const HookComponent = () => { const [username, setUsername] = useState('Abrar'); const [count, setState] = useState(); const handleChange = (e) => { setUsername(e.target.value); } return ( {username} From HookComponent: {count} ) } const HookComponent2 = () => { const [count, setCoun..

programing 2023.02.26

MUI 구성 요소의 미디어 조회

MUI 구성 요소의 미디어 조회 에서 MUI 컴포넌트를 사용하고 있다.ReactJs어떤 이유에서인지 화면 폭에 따라 반응하도록 일부 컴포넌트를 커스터마이즈해야 합니다. 추가했습니다.media query컴포넌트에 스타일 속성으로 전달하지만 작동하지 않는 경우, 어떤 아이디어라도 있습니까? 다음과 같은 코드를 사용하고 있습니다. const drawerWidth = { width: '50%', '@media(minWidth: 780px)' : { width: '80%' } } 코드는 웹에서만 작동하며 모바일 디바이스에서는 작동하지 않습니다.심지어.CSS코드가 적용되지 않습니다.개발자 콘솔에서 확인했습니다.MUI 버전 0.18.7을 사용하고 있습니다. 어떤 도움이라도 주시면 감사하겠습니다. PS: 요건에 따라 ..

programing 2023.02.26
반응형