반응형

ReactJS 35

Javascript에는 필수 vs .default가 필요합니다.

Javascript에는 필수 vs .default가 필요합니다. 리액트 핫 로더를 사용하고 있는데 코드 예제가 너무 헷갈려요. import React from 'react' import ReactDOM from 'react-dom' import { AppContainer } from 'react-hot-loader' import App from './containers/App' ReactDOM.render( , document.getElementById('root') ); // Hot Module Replacement API if (module.hot) { module.hot.accept('./containers/App', () => { const NextApp = require('./containers..

programing 2023.03.07

Reactjs Dev 툴의 훅 번호는 무엇에 해당합니까?

Reactjs Dev 툴의 훅 번호는 무엇에 해당합니까? 성능 문제를 프로파일링하고 싶은 react.js 앱이 있습니다. 파이어폭스에서 리액트 개발 도구 프로파일러를 사용하고 있어요 특정 상호작용을 프로파일링하고 개발 도구에서 Flamegraph와 순위 지정 시간 그래프를 가져옵니다. 그런 다음 개발 도구에 다음 메시지가 표시됩니다. 개발 툴의 이 부분은 인터랙티브하지 않기 때문에, 훅의 번호를 매기는 방법에 대해서는 아무것도 찾을 수 없습니다. 이 숫자들을 어떻게 해석해야 하나요?그들은 무엇에 대응합니까?어떤 훅에 대한 정보는 어디서 찾을 수 있나요?이것이 그들이 그 업적을 추가한 홍보입니다.일부 성능 제약으로 인해 더 나은 UI를 제공하지 못했습니다.그러나 개발 도구의 컴포넌트 탭으로 이동하여 해당 ..

programing 2023.03.07

React.forwardRef를 사용하는 것과 커스텀 레퍼런스 프로포즈를 사용하는 것의 가치

React.forwardRef를 사용하는 것과 커스텀 레퍼런스 프로포즈를 사용하는 것의 가치 나도 그것을 알아.React.forwardRefrefact docs에서 자녀 기능 컴포넌트에 ref를 전달하는 허가된 방법인 것 같습니다. const FancyButton = React.forwardRef((props, ref) => ( {props.children} )); // You can now get a ref directly to the DOM button: const ref = React.createRef(); Click me!; 단, 커스텀 프로펠러를 전달하기만 하면 어떤 이점이 있습니까? const FancyButton = ({ innerRef }) => ( {props.children} )); c..

programing 2023.03.07

React Native: 텍스트를 중앙에 배치하는 방법

React Native: 텍스트를 중앙에 배치하는 방법 텍스트를 ReactNative에서 가로와 세로로 중앙에 배치하려면 어떻게 해야 합니까? rnplay.org에 justiceContent="center" 및 alignItems="center"가 작동하지 않는 예제 응용 프로그램이 있습니다. https://rnplay.org/apps/AoxNKQ 텍스트의 중심이 맞춰져야 합니다.그리고 텍스트(노란색)와 상위 컨테이너 사이에 여백이 있는 이유는 무엇입니까? 코드: 'use strict'; var React = require('react-native'); var { AppRegistry, StyleSheet, Text, Image, View, } = React; var SampleApp = React.cr..

programing 2023.03.07

확장할 구성 "반응"을 로드하지 못했습니다.

확장할 구성 "반응"을 로드하지 못했습니다. 아래 사이트에서 create-react-app을 사용하지 않고 리액트 앱을 작성하려고 합니다. https://www.freecodecamp.org/news/how-to-set-up-deploy-your-react-app-from-scratch-using-webpack-and-babel-a669891033d4/ 하지만, 다음과 같은 오류가 계속 발생합니다. ./src/index.js 모듈 경고(./node_modules/eslint-loader/dist/cjs.js에서):확장할 구성 "반응"을 로드하지 못했습니다. 모든 의존 관계를 설치하려고 시도했고 몇 시간 동안 답변을 검색했지만 문제를 찾을 수 없습니다. 제 소포입니다.json: { "name": "xxx"..

programing 2023.03.02

JSX(React)에서 곱슬머리 괄호는 무엇을 의미합니까?

JSX(React)에서 곱슬머리 괄호는 무엇을 의미합니까? 예를 들어 반응에서 스타일을 설정하려면 var css = {color: red} 그리고. Hello world 두 번째 코드 스니펫에서 css 주위에 곱슬곱슬한 중괄호가 필요한 이유는 무엇입니까?중괄호는 JSX 파서가 그 사이의 내용을 문자열이 아닌 JavaScript로 해석해야 한다는 것을 알리기 위한 특별한 구문입니다. 변수나 JSX 내의 참조와 같은 JavaScript 식을 사용할 때 필요합니다.표준 이중 따옴표 구문을 다음과 같이 사용할 경우: var css = { color: red } Hello world JSX는 변수를 사용하려는 의도를 알지 못합니다.css문자열 대신 style 속성으로 지정합니다.그리고 변수 주위에 곱슬곱슬한 괄호..

programing 2023.03.02

React.js를 사용하여 클래스를 추가하려면 어떻게 해야 합니까?

React.js를 사용하여 클래스를 추가하려면 어떻게 해야 합니까? 클래스를 추가해야 합니다.active버튼을 클릭하고 다른 모든 항목을 삭제한 후active반. 여기를 봐주세요.https://codepen.io/azat-io/pen/RWjyZX var Tags = React.createClass({ setFilter: function(filter) { this.props.onChangeFilter(filter); }, render: function() { return All male female child blonde } }); var Kid = React.createClass({ render: function() { return {this.props.name} } }); var List = React..

programing 2023.02.25

화살표 기능 및 괄호(), {} 또는 {} 사용

화살표 기능 및 괄호(), {} 또는 {} 사용 화살표 함수에서는 왜 화살표 함수의 리터럴을 랩할 필요가 없는지 이해할 수 없습니다.({})이 예에서는 싱글로 감싸진 리터럴 대신 괄호(britar)를 사용합니다.()교정기. 왜요?나는 그것에 대한 답을 찾기 위해 인터넷을 검색했지만 실패했다. 그리고 왜 우리가 그 주장을 이중괄호로 묶어야 하는지({})뿐만 아니라()? const FilterLink = ({ filter, children }) => ( {children} ) 사용.({})논의에 대한 것입니다.=> ()에 해당하는 암묵적인 리턴입니다.=> { return ()}그리고.(는 객체의 시작 부분과 함수 본체의 여는 괄호 사이를 명확히 하는 역할만 하며, 일반적으로 여러 줄의 반환 값이 있을 때 사..

programing 2023.02.25

불변 위반:이 탐색기에 대한 탐색 소품이 없습니다.

불변 위반:이 탐색기에 대한 탐색 소품이 없습니다. 리액트 네이티브 앱을 기동하려고 했을 때, 이 메세지가 왔습니다.보통 이런 형식은 다른 멀티스크린 내비게이션에서도 작동하지만 이 경우에는 작동하지 않습니다. 다음은 오류입니다. Invariant Violation: The navigation prop is missing for this navigator. In react-navigation 3 you must set up your app container directly. More info: https://reactnavigation.org/docs/en/app-containers.html 앱 포맷은 다음과 같습니다. import React, {Component} from 'react'; import {..

programing 2023.02.25

Jest 폴더 구조

Jest 폴더 구조 저는 현재 CRA 어플리케이션에서 Jest를 사용하고 있습니다.CRA는 다음 명령어를 사용하기로 선택했군요.filename.test.js필기 시험을 볼 때 형식을 취하지만 나는 이 접근 방식이 눈과 뇌에 조금 번거롭다는 것을 발견한다.나는 당신이 다음 폴더에 시험을 쓸 수 있다는 것을 알아냈다.__tests__jeast는 자동으로 해당 폴더에서 테스트를 실행합니다.나는 이 방식이 마음에 든다.여기서 궁금한 것은 이 설정을 사용할 때의 기준은 무엇입니까?보통 제가src폴더는 다음과 같이 설정됩니다. src └── components ├── some1ComponentDir └── some2ComponentDir 작성해야 합니까?__tests__각 레벨의 폴더 또는 내 구조를 조롱해야 합니..

programing 2023.02.22
반응형