반응형

reactjs 30

React.js 구성 요소 확장

React.js 구성 요소 확장 Backbone.js에 대해 가장 감사한 점 중 하나는 얼마나 단순하고 우아한 상속이 이루어지는가 하는 것입니다.React를 이해하기 시작했는데 이 Backbone 코드와 비슷한 것을 찾을 수 없습니다. var Vehicle = Backbone.View.extend({ methodA: function() { // ... } methodB: function() { // ... } methodC: function() { // ... } }); var Airplane = Vehicle.extend({ methodC: function() { // Overwrite methodC from super } }); 반응에는 믹스인이 있습니다.이러한 믹스인을 사용하면 위의 예에 어느 정도..

it-source 2023.03.17

'useState' 후크를 사용할 때 React DevTools를 사용하여 React 다중 상태의 '필드' 이름을 볼 수 있는 방법이 있습니까?

'useState' 후크를 사용할 때 React DevTools를 사용하여 React 다중 상태의 '필드' 이름을 볼 수 있는 방법이 있습니까? 리액트 훅을 배우고 실험하고 있습니다.Chrome에서 React DevTools를 사용하여 컴포넌트의 현재 상태 값을 검사하면 상태는 정상이지만 실제 '필드'는 개인에 의해 업데이트되는 상태 변수입니다.useState후크 - 연관된 이름이 없습니다.대신 몇 개의 현이나 몇 개의 부란 등이 보입니다.일반적으로 무슨 일이 일어나고 있는지 알 수 있지만 문제가 있는 것 같습니다. 상태 변수의 이름이 무엇인지 확인할 수 있으면 좋겠습니다. 예를 들어, 제가 이런 걸핏하면 const [doughnuts, setDoughnuts] = useState(24) React De..

it-source 2023.03.17

웹 팩 파일 로더를 사용하여 이미지 파일을 로드하는 방법

웹 팩 파일 로더를 사용하여 이미지 파일을 로드하는 방법 웹 팩을 사용하여 reactjs 프로젝트를 관리하고 있습니다.웹팩으로 javascript로 이미지를 로드하고 싶다.file-loader다음은 webpack.config.js 입니다. const webpack = require('webpack'); const path = require('path'); const NpmInstallPlugin = require('npm-install-webpack-plugin'); const PATHS = { react: path.join(__dirname, 'node_modules/react/dist/react.min.js'), app: path.join(__dirname, 'src'), build: path.joi..

it-source 2023.03.17

화면으로 돌아가면 React Native에서 useEffect가 호출되지 않음

화면으로 돌아가면 React Native에서 useEffect가 호출되지 않음 잘 지내시나요.이것은 이 문제의 시나리오입니다.간단하게 하기 위해 화면이 2개 있다고 칩시다. A 화면으로 들어갑니다.A 화면의 useEffect 호출. A 화면에서 B 화면으로 이동하다 B에서 A 화면으로 돌아갑니다.이 때 useEffect는 호출되지 않습니다. function CompanyComponent(props) { const [roleID, setRoleID] = useState(props.user.SELECTED_ROLE.id) useEffect(()=>{ // this called only once when A screen(this component) loaded, // but when comeback to th..

it-source 2023.03.17

React-Router와의 액티브링크

React-Router와의 액티브링크 React-Router(v4)를 테스트하고 있는데 Nav에서 다음 중 하나를 실행하는 데 문제가 있습니다.Link의active. 다음 중 하나를 클릭하면Link태그를 붙이면 액티브한 것이 동작하기 시작합니다.하지만, 나는 집에 가고 싶다.Link앱이 시작되자마자 활성화되는 것은 앱이 로딩되는 컴포넌트이기 때문입니다./경로요. 방법이 없을까요? 현재 코드는 다음과 같습니다. const Router = () => ( Home {/* I want this to start off as active */} About ) 이것은 React Router v4에 대한 오래된 답변입니다. 더 이상 가지고 있지 않다activeClassName또는activeStyle특성.react-ro..

it-source 2023.03.17

async componentDidMount()를 사용하는 것은 좋은 것입니까?

async componentDidMount()를 사용하는 것은 좋은 것입니까? componentDidMount()비동기 함수의 베스트 프랙티스로서 리액트 네이티브를 사용하지 않는 것이 좋을까요? 가 정보를 좀 요.AsyncStorage마운트되었을 때, 그것을 하게 하는 은, 「이것」을 「이것」으로입니다.componentDidMount()함수 비동기 async componentDidMount() { let auth = await this.getAuth(); if (auth) this.checkAuth(auth); } 그것에 문제가 있거나 이 문제에 대한 다른 해결책이 있나요?먼저 차이점을 지적하고 문제를 일으킬 수 있는 방법을 알아봅시다. sync abycode는 '동기'와 '입니다.componentDid..

it-source 2023.03.12

리액트 라우터를 사용하여 사용자가 페이지를 떠나는 것을 감지하는 중

리액트 라우터를 사용하여 사용자가 페이지를 떠나는 것을 감지하는 중 내 ReactJS 앱이 특정 페이지에서 벗어날 때 사용자에게 알렸으면 합니다.특히 작업을 수행하도록 알려주는 팝업 메시지: 변경 내용은 저장되지만 아직 공개되지 않았습니다.지금 당장 할까? 를 거거 this this에서 요?react-router또는 리액트 페이지/컴포넌트 내에서 실행할 수 있습니까? 후자에 대해선 아무것도 못 찾았고, 첫 번째는 피하고 싶어요물론 그것이 일반적인 것이 아니라면, 어떻게 하면 사용자가 갈 수 있는 다른 모든 페이지에 코드를 추가하지 않고 이런 일을 할 수 있을지 궁금하게 된다. 어떤 통찰이라도 환영합니다, 감사합니다!react-router는 v4를 사용하여 했습니다.Prompt차단할 컴포넌트에 다음 내용을..

it-source 2023.03.07

상태가 개체의 배열인 경우 반응 상태를 업데이트하는 중

상태가 개체의 배열인 경우 반응 상태를 업데이트하는 중 상태에 있는 오브젝트 배열: this.state = { items: [ {id: 1, someattr: "a string", anotherattr: ""}, {id: 2, someattr: "another string", anotherattr: ""}, {id: 3, someattr: "a string", anotherattr: ""}, ] } ID 속성을 기반으로 항목 배열을 검색하고 개체 속성을 업데이트할 수 있어야 합니다. 는 그 을 는는그 i i i i i i i i i i i로 얻을 수 있다.filtering ★★★★★★★★★★★★★★★★★」findingid param이라는 ID를 합니다. 문제가 되는 것은 어레이를 업데이트한 후 변환 없이..

it-source 2023.03.07

React.js에서 이미지를 프리로드하는 방법

React.js에서 이미지를 프리로드하는 방법 React.js에서 이미지를 프리로드하는 방법메뉴와 같이 동작하는 드롭다운 선택 컴포넌트가 있습니다만, 처음에 열었을 때 보이지 않을 수 있기 때문에 아이템의 이미지 아이콘을 미리 로드해야 합니다. 시도했습니다. https://github.com/sambernard/react-preload https://github.com/wizardzloy/react-img-preload 첫 번째는 이해하기 쉽고 사용하기 쉬운 API를 갖추고 있지만 이미지가 로드되어도 로드되지 않았다는 경고를 표시하는 Spaming Console입니다.두 번째는 이상한 API를 가지고 있는데 예를 들어봤는데 아무것도 프리로드 되지 않았습니다. 그래서 아마 저 스스로 무언가를 구현해야 할 ..

it-source 2023.03.07

수집되지 않은 참조 오류: ReactDOM이 정의되지 않았습니다.

수집되지 않은 참조 오류: ReactDOM이 정의되지 않았습니다. Rails 어플리케이션을 가지고 리액트 레일 젬을 설치하고 셋업하여 테스트 어플리케이션을 실행해 보겠습니다. 새로 설치되었을 때 hello world 프로그램을 실행하려고 하면 다음 오류가 발생합니다. 수집되지 않은 참조 오류: ReactDOM이 정의되지 않았습니다. 제 반응은 이렇습니다. var HelloWorld = React.createClass({ render: function() { return ( Hello, ! It is {this.props.date.toTimeString()} ); } }); setInterval(function() { ReactDOM.render( , document.getElementById('examp..

it-source 2023.03.02
반응형