반응형

reactjs 36

상태 비저장, 기능성 React 컴포넌트용 TypeScript 기본 소품(옵션)을 지정하는 방법

상태 비저장, 기능성 React 컴포넌트용 TypeScript 기본 소품(옵션)을 지정하는 방법 (React Native 프로젝트의 경우) Typescript에 옵션 소품 및 defaultProps를 사용하여 상태 비저장 React 구성 요소를 생성하려고 합니다.이것은 바닐라 JS에서는 사소한 일이지만, TypeScript에서는 어떻게 해야 할지 막막합니다. 다음 코드 포함: import React, { Component } from 'react'; import { Text } from 'react-native'; interface TestProps { title?: string, name?: string } const defaultProps: TestProps = { title: 'Mr', name: ..

programing 2023.04.05

resactj의 렌더와 반환의 차이점은 무엇입니까?

resactj의 렌더와 반환의 차이점은 무엇입니까? JavaScript는 처음입니다.나는 많은 곳을 본다.return그리고.render어떤 차이가 있는지 알고 싶을 뿐이죠render메서드는 클래스 메서드로 사용하여 React 컴포넌트를 작성할 때 필요합니다. 문서에 따르면: 그render()메서드가 필요합니다. 호출 시 검사해야 합니다.this.props그리고.this.state다음 중 하나의 유형을 반환합니다. 요소를 반응시키다.일반적으로 JSX를 통해 생성됩니다.요소는 네이티브 DOM 컴포넌트의 표현일 수 있습니다.()또는 사용자 정의 복합 컴포넌트(). 문자열과 숫자이러한 노드는 DOM에서 텍스트노드로 렌더링 됩니다. 포털작성처:ReactDOM.createPortal. null 아무것도 렌더링하지 ..

programing 2023.04.05

플럭스 베스트 프랙티스:디스패치 액션, AJAX 콜을 Web API Utils에 저장합니다.

플럭스 베스트 프랙티스:디스패치 액션, AJAX 콜을 Web API Utils에 저장합니다. 저는 이 이미지가 전부는 아니더라도 대부분의 플럭스 프로그래머들에게 궁극적인 가이드라는 것을 알고 있습니다.이 흐름을 염두에 두고 몇 가지 질문이 있습니다. 이 모든 것을 사용하는 것이 올바른가/매우 권장되는가?$.ajax웹 API Utils에서 호출할 수 있습니까? 콜백은 액션 크리에이터를 호출하여 프로세스 내의 데이터를 전달합니다. Store에서 AJAX를 호출하려면 먼저 Action Creator를 호출해야 합니다.Web API Utils의 함수를 스토어에서 직접 호출하는 것은 근본적으로 잘못된 것입니까? 스토어에서 Action Creators로 연결되는 가상 단측 화살표 같은 것이 있습니까? 뷰를 거치지 ..

programing 2023.04.05

반응에서 스크롤 애니메이션 처리

반응에서 스크롤 애니메이션 처리 React에서 스크롤 위치를 올바르게 처리하는 방법은 무엇입니까?UX가 좋아져서 부드러운 스크롤이 정말 좋아요.리액트에서 DOM을 조작하는 것은 안티패턴이기 때문에 어떻게 하면 어떤 위치/요소로 부드럽게 스크롤할 수 있을까요?보통 요소의 scrollTop 값을 변경하지만 이는 DOM에서의 조작이므로 허용되지 않습니다. JSBIN 코드: import React from 'react'; import ReactDOM from 'react-dom'; class App extends React.Component { handleClick = e => { for (let i = 1; i (this.node.scrollTop = i), i * 2); } }; render() { cons..

programing 2023.04.05

MERN에서 백엔드 및 프런트엔드의 파일 구조를 구성하는 방법

MERN에서 백엔드 및 프런트엔드의 파일 구조를 구성하는 방법 express + mongoose 기반의 백엔드가 있습니다.파일 구조: - /models -- item.js - /node.modules -- ... - server.js - package-lock.json - package.json 또한 프런트 엔드용 일반 Create-React-App 기반 폴더: - /src -- /assets --- index.css -- /components --- Somecomponent.js -- /containers --- App.js -- /reducers --- somereducers.js - /node.modules -- ... -- index.js -- registerServiceWorker.js - .g..

programing 2023.04.05

React Apollo - 여러 쿼리 만들기

React Apollo - 여러 쿼리 만들기 다음과 같은 쿼리 파일이 있습니다. import {gql} from 'react-apollo'; const queries = { getApps: gql` { apps { id name } } `, getSubjects: gql` { subjects { id name } } ` }; export default queries; 그런 다음 다음 다음 파일을 React 구성 요소로 가져옵니다. import React, {Component} from 'react' import queries from './queries' class Test extends Component { ... } export default graphql(queries.getSubjects)(gra..

programing 2023.03.31

리액트 후크를 사용한 componentDidUpdate와 동등

리액트 후크를 사용한 componentDidUpdate와 동등 tldr; 시뮬레이션 방법componentDidUpdate또는 그 이외의 방법으로key컴포넌트를 강제로 리셋할 수 있는 어레이가 있는 소품입니까? 타이머를 표시하고 0에 도달하면 콜백을 실행하는 컴포넌트를 실장하고 있습니다.이 목적은 콜백이 오브젝트 목록을 갱신하는 것입니다.후자의 컴포넌트는 새로운 리액트 훅으로 구성되어 있습니다. useState그리고.useEffect. 그state에 타이머가 시작된 시각과 남은 시간을 나타냅니다.그effect는 남은 시간을 갱신하고 콜백을 호출해야 하는지 여부를 확인하기 위해 매초 호출 간격을 설정합니다. 이 컴포넌트는 타이머를 재스케줄 하거나 제로 상태가 되었을 때 인터벌을 계속하는 것이 아니라 콜백과 ..

programing 2023.03.31

ReactJS 구성 요소 이름은 대문자로 시작해야 합니까?

ReactJS 구성 요소 이름은 대문자로 시작해야 합니까? JSBin의 ReactJS 프레임워크를 가지고 놀고 있습니다. 컴포넌트명이 소문자로 시작하면 동작하지 않습니다. 예를 들어 다음 항목은 렌더링되지 않습니다. var fml = React.createClass({ render: function () { return Go } }); React.render(, document.body); 하지만 제가 이 장치를 교체하자마자fml와 함께Fml렌더링합니다. 작은 글씨로 태그를 시작할 수 없는 이유가 있나요?JSX에서는 소문자 태그명은 HTML 태그로 간주됩니다.단, 점(프로퍼티액세서)이 있는 소문자 태그명은 사용할 수 없습니다. HTML 태그와 리액트 컴포넌트를 참조해 주세요. 에 편찬하다.React.cr..

programing 2023.03.31

플럭스+리액트 vs 백본+ 반응

플럭스+리액트 vs 백본+ 반응 닫혔어. 이 질문은 좀 더 자세히 설명해야 합니다.초점을 맞춥니다.현재 답변을 받고 있지 않습니다. 이 질문을 개선하시겠습니까?이 게시물을 편집하여 하나의 문제에 초점을 맞추도록 질문을 업데이트하십시오. 6년 전에 문을 닫았어요 이 질문을 개선하다 Backbone+React에 비해 Flux+React의 장점은 무엇입니까?복잡한 코드 기반에 대한 코드 개발 용이성 외에도 성능 차이가 있습니까? Backbone+React를 사용하는 애플리케이션에서 모델과 리액트 뷰 사이에 1:1의 관계가 있으면 어떻게 됩니까?플럭스는 React 애플리케이션을 구축하기 위한 설계 패턴입니다.따라서 저장소의 Backbone 모델과 컬렉션을 사용하여 데이터를 가져오고 저장할 수 있습니다. 또한 R..

programing 2023.03.31

useEffect in React에서 커스텀 훅을 사용할 수 있습니까?

useEffect in React에서 커스텀 훅을 사용할 수 있습니까? 매우 기본적인 커스텀 훅을 사용하고 있으며, 이 훅은 파이어베이스에서 문서를 반환한다. import React, { useState, useEffect, useContext } from 'react'; import { FirebaseContext } from '../sharedComponents/Firebase'; function useGetDocument(path) { const firebase = useContext(FirebaseContext) const [document, setDocument] = useState(null) useEffect(() => { const getDocument = async () => { let s..

programing 2023.03.31
반응형