반응형

reactjs 31

네이티브와 안드로이드 대응

네이티브와 안드로이드 대응 리액트 네이티브를 새로운 웹 앱에 사용할까 생각 중입니다.iOS 앱과 Android 앱을 모두 사용하여 배송할 수 있습니까? 로드맵에 기재되어 있는 것은 알고 있습니다만, 개별 오픈 소스 프로젝트(React Android vs React Native 등)인지, 아니면 하나의 프로젝트(React Native 등)인지 불분명합니다.TLDR: 할 수 있을 것 같습니다.그러나 사용 사례에 따라 다릅니다. 80~99%의 코드 재사용을 목표로 할 수 있습니다(Android/iOS 네이티브 뷰/모듈 사용량에 따라 다름).커스텀 그래픽 코드 또는 저레벨 TCP 네트워크 코드가 있습니까?네이티브 코드로만 실행할 수 있으며 JS 코드에 API로 노출됩니다.플랫폼 고유의 JS 코드의 양은 실제로는..

programing 2023.04.05

응답 useReducer 비동기 데이터 가져오기

응답 useReducer 비동기 데이터 가져오기 새로운 react useReducer API로 데이터를 가져오려고 하는데 비동기적으로 가져올 필요가 있는 스테이지에 멈춰 있습니다.어떻게 된 건지 모르겠어:/ 스위치 스테이트먼트에 데이터 페치를 배치하는 방법, 그렇지 않은 방법? import React from 'react' const ProfileContext = React.createContext() const initialState = { data: false } let reducer = async (state, action) => { switch (action.type) { case 'unload': return initialState case 'reload': return { data: reloa..

programing 2023.04.05

JS index.js 파일에 접속하는 index.html을 ID 참조용으로 어떻게 반응합니까?

JS index.js 파일에 접속하는 index.html을 ID 참조용으로 어떻게 반응합니까? 이 질문에는 이미 답변이 있습니다. Create-React-App 어플리케이션의 index.html과 index.js 사이의 접속처는 어디입니까? (2개의 답변) 닫힘3년 전. 요즘 리액션을 시작해요. my index.html은 다음을 포함합니다. 및 index.timeout에는 다음이 포함됩니다. import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import './index.css'; ReactDOM.render( , document.getElementById('root') ); 의심스럽지만, 제가 이 사건..

programing 2023.04.05

재료 UI 변경 시 반응 테스트 라이브러리 구성 요소 선택

재료 UI 변경 시 반응 테스트 라이브러리 구성 요소 선택 테스트하려고 합니다.onChangereact-testing-library를 사용하여 Select 컴포넌트의 이벤트. 다음 방법으로 요소를 잡습니다.getByTestId그 후 요소의 값을 설정하고 호출합니다.fireEvent.change(select);하지만onChange는 호출되지 않으며 상태는 갱신되지 않습니다. 선택한 컴포넌트 자체와 기본 컴포넌트에 대한 참조를 모두 사용해 보았습니다.input둘 다 작동하지 않습니다. 해결방법은?아니면 이미 알고 있는 문제인가요?material-ui의 select 컴포넌트는 mouseDown 이벤트를 사용하여 팝오버메뉴를 표시합니다.사용하시는 경우fireEvent.mouseDown팝오버를 트리거한 다음 표시..

programing 2023.04.05

component Did Mount는 정확히 언제 실행됩니까?

component Did Mount는 정확히 언제 실행됩니까? 이것은 리액트에서 반복적으로 발생하고 있는 문제입니다.그componentDidMount이 방법은 컴포넌트가 처음 렌더링될 때 실행되므로 높이 및 오프셋과 같은 DOM 측정을 수행할 수 있는 자연스러운 장소처럼 보입니다.그러나 컴포넌트 라이프 사이클의 이 시점에서 잘못된 스타일의 판독치를 수신하는 경우가 많습니다.디버거를 사용할 때 컴포넌트가 DOM에 있지만 화면에 아직 그려져 있지 않습니다.이 문제는 폭/높이가 대부분 100%로 설정된 요소에서 발생합니다.치수를 재는 경우componentDidUpdate- 모든 것이 정상적으로 동작하지만, 이 방법은 컴포넌트를 처음 렌더링할 때 실행되지 않습니다. 그래서 제 질문은, 정확히 언제가compone..

programing 2023.03.31

React 18 TypeScript 자녀 FC

React 18 TypeScript 자녀 FC 리액트 18로 업그레이드 했는데 잘 정리됐어요.오늘날에는 어린이를 사용하는 모든 구성 요소가 오류를 발생시키는 것 같습니다. Property 'children' does not exist on type 'IPageProps'. 으로 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★FC인터페이스입니다. 수동으로 추가해야 할 것 요.children: ReactNode리액트 아동을 위한 올바른 활자 타입은 무엇입니까? 이건 리액트 18 업데이트의 일부인가요? 아니면 제 환경에 문제가 있는 건가요? 패키지.json "react": "^18.0.0", "react-dom": "^18.0.0", "next": "12..

programing 2023.03.31

유니코드 문자를 표시/복호화하는 Javascript 대응

유니코드 문자를 표시/복호화하는 Javascript 대응 변환해야 할 유니코드 문자열이 있습니다.\u00f3의 문자열을 o로 렌더링해야 합니다.이것은 예시로, 다른 모든 유형의 문자 ,, í, ...와 함께 발생해야 합니다. 기본 코드는 https://jsfiddle.net/dddf7o70/ 입니다. 변환이 필요하다 안으로 Información JS 문자열로 전달합니다. 수동 처리를 할 필요가 없습니다(오류가 발생하기 쉽습니다). 바이올린: https://jsfiddle.net/dddf7o70/5/만약 당신이 어떤 이유로든 글자 그대로의 글자를 가진 끈으로 작업해야 한다면\u실제 문자가 아닌 16진수를 사용하여 숫자로 변환한 다음 String.fromCharCode()를 사용하여 해당 숫자를 실제 문자로..

programing 2023.03.31

React에 필요한 프로포즈를 1개 이상 포함

React에 필요한 프로포즈를 1개 이상 포함 최소한 필요한 소품 중 하나를 만들어야 합니다. MyComponent.propTypes = { data: PropTypes.object, url: PropTypes.string }; 따라서 위의 예에서는 다음 중 하나를 수행합니다.data또는url소품을 제공해야 합니다.여기서의 사용 사례는 사용자가 다음 중 하나를 제공할 수 있다는 것입니다.data또는url. 만약url컴포넌트가 제공되면 이 컴포넌트가 이 컴포넌트를 가져옵니다.data. 보너스 질문:소품 하나와 소품 하나를 어떻게 해야 하나요?PropTypes는 실제로 커스텀 함수를 인수로 사용할 수 있으므로 다음과 같은 작업을 수행할 수 있습니다. MyComponent.propTypes = { data: ..

programing 2023.03.31

div 클릭 시 열린 파일 브라우저 반응

div 클릭 시 열린 파일 브라우저 반응 내 반응 구성요소: import React, { PropTypes, Component } from 'react' class Content extends Component { handleClick(e) { console.log("Hellooww world") } render() { return ( ) } } export default Content 여기서 아이콘이 있는 div를 클릭할 때 다음을 엽니다.사진을 선택할 수 있는 옵션을 보여 주는 파일입니다.사진을 선택한 후 어떤 사진을 선택했는지 값을 받고 싶습니다.어떻게 반응할 수 있을까요?먼저, 고객용 참조 후크를 만듭니다.input. const inputFile = useRef(null) // or, for Ty..

programing 2023.03.31

NextJs CORS 문제

NextJs CORS 문제 Vercel(www.example.com)에서 호스팅하는 Next.js 앱을 사용하고 있습니다.이 앱은 백엔드와 통신해야 합니다.api.example.com의 다른 서버에서 호스트되는 NET Core Web API..NET core web api는 CORS를 허용하도록 설정되어 있지만 Next.js는 AX를 사용하면 데이터가 표시되지 않는다고 계속 불평합니다.응답에 allow-cors 헤더가 없기 때문에 IOS가 데이터를 가져옵니다. 오리진 'http://www.example.com'에서 XMLHttpRequest로의 액세스가 CORS 정책에 의해 차단되었습니다.비행 전 요청에 대한 응답이 액세스 제어 검사를 통과하지 못했습니다.요청된 리소스에 'Access-Control-Al..

programing 2023.03.31
반응형