reactjs 39

React.js에서의 onSubmit 설정

React.js에서의 onSubmit 설정 양식을 제출하면, 나는 그것을 하려고 한다.doSomething()디폴트 포스트 동작입니다. React에서 onSubmit은 폼에서 지원되는 이벤트라고 합니다.다만, 다음의 코드를 사용해 보면, var OnSubmitTest = React.createClass({ render: function() { doSomething = function(){ alert('it works!'); } return Click me ; } }); 방법doSomething()는 실행되지만 그 이후에는 기본 POST 동작이 계속 실행됩니다. 제 jsfiddle에서 테스트해 보세요. 질문입니다.기본 포스트 동작을 방지하려면 어떻게 해야 합니까?고객님의 고객명doSomething()기능,..

programing 2023.03.06

유형 '{}'을(를) 유형 'ReactNode'에 할당할 수 없습니다.

유형 '{}'을(를) 유형 'ReactNode'에 할당할 수 없습니다. 이 질문에는 이미 답변이 있습니다. NPM 패키지를 JSX 구성 요소로 사용할 수 없음 - 유형 오류 (답변 19개) 닫힘10개월 전에요. 이 오류는 발생했지만 Vercel에서만 발생하며 로컬에서는 발생하지 않습니다. 왜일까요? error: 'FontAwesomeIcon' cannot be used as a JSX component. ./components/Services/ServiceContainer.tsx:25:6 12:01:54.967 Type error: 'FontAwesomeIcon' cannot be used as a JSX component. 12:01:54.967 Its element type 'ReactElement ..

programing 2023.03.06

React의 mouseEvent에 오프셋 X/오프셋이 없습니다.y

React의 mouseEvent에 오프셋 X/오프셋이 없습니다.y 요소를 기준으로 클릭 위치를 얻으려고 하는데 이벤트에 오프셋 X가 없습니다. onClick(e) { console.log(e.offsetX) // returns undefined console.log(e.target.offsetX) // returns undefined } render() { return } 요소에서 클릭 위치를 얻으려면 어떻게 해야 합니까?아, 그렇군요.로부터 알 수 있다.e.nativeEvent.offsetX올바른 접근법인가?evt.nativeEvent.offsetX로 인해 컴포넌트가 자주 깜박이는 문제가 발생하며 약간 이상하다는 것을 알게 되었습니다.디버깅은 아직 완료하지 않았지만 사용으로 전환했습니다. 상위 컨테이너..

programing 2023.03.06

React를 통한 빅리스트 퍼포먼스

React를 통한 빅리스트 퍼포먼스 React에서 필터 가능한 목록을 구현하는 중입니다.리스트의 구조는 아래 그림과 같습니다. 전제 동작 방법에 대해서는, 다음과 같이 설명합니다. 인 ""에 있습니다.Search★★★★★★ 。 상태는 다음과 같습니다. {visible : 부울,파일: 어레이,filtered : 어레이,query : 문자열,현재 선택된색인 : 정수} files는 파일 경로를 포함하는 매우 큰 배열일 가능성이 있습니다(확실한 숫자는 엔트리가 됩니다). filtered는 사용자가 2자 이상 입력한 후 필터링된 배열입니다.에, 그 로 보존하는 것에 , 하지만, 이 한 것은, 라고 하는 것입니다. currentlySelectedIndex필터링된 목록에서 현재 선택된 요소의 인덱스입니다. 가 '2'..

programing 2023.03.01

componentDidUpdate() 내의 setState()

componentDidUpdate() 내의 setState() 드롭 다운의 높이와 화면상의 입력 위치에 따라 드롭 다운이 입력의 아래 또는 위쪽으로 이동하는 스크립트를 쓰고 있습니다.또한 방향성에 따라 수식자를 드롭다운으로 설정하고 싶습니다.단, 을 사용하여setState내부componentDidUpdate무한 루프 생성(명확한) 이 기능을 사용하는데서 해결책을 찾았습니다.getDOMNodeclassname을 직접 드롭다운으로 설정하지만 React 툴을 사용하여 더 나은 솔루션이 있을 것 같습니다.누가 나 좀 도와줄래? 다음은 다음 코드와 관련된 작업 코드입니다.getDOMNode(코드 심플화를 위해 위치추적 로직이 약간 무시되었습니다. let SearchDropdown = React.createClas..

programing 2023.03.01

Reactjs "Error: ENOENT: 그런 파일이나 디렉토리가 없습니다.열어주세요.jsx 파일을 tsx로 변환한 후

Reactjs "Error: ENOENT: 그런 파일이나 디렉토리가 없습니다.열어주세요.jsx 파일을 tsx로 변환한 후 나는 가지고 있다create-react-app앱과 저는 번역 파일입니다.jsx로.typescript예를 들어, 1개의 파일은/code/app_react/src/common/Action.jsx그래서 이름을 바꿨어요./code/app_react/src/common/Action.tsx변환에 성공하기 위해 필요한 변경을 가했습니다.tsx하지만 이름 변경과 관련된 오류가 나타납니다. ./src/common/Action.jsx 오류: ENOENT: 이러한 파일 또는 디렉터리가 없습니다. '/code/src/common/Action.jsx'를 여십시오. 의 재구축은 도움이 되지 않습니다. 어떤 이..

programing 2023.03.01

리액트의 차이점은 무엇입니까?Function Component와 플레인 JS 함수 컴포넌트

리액트의 차이점은 무엇입니까?Function Component와 플레인 JS 함수 컴포넌트 이 두 가지 예는 같은 것을 실현합니다.하지만 후드 아래에는 어떤 차이가 있을까?기능 컴포넌트와React.컴포넌트 및 리액트PureComponent. 하지만 관련 문서를 찾을 수 없습니다.React.FunctionComponent. React.Function Component(기능 컴포넌트) const MyComponentA: React.FunctionComponent = (props) => { return ( I am a React.FunctionComponent ); }; 일반 JS 함수 구성 요소: const MyComponentB = (props) => { return ( I am a plain JS fun..

programing 2023.03.01

포함된 생성자에 반환 유형 주석이 없으므로 '유형' 식에 암묵적으로 '임의' 유형이 지정됩니다.

포함된 생성자에 반환 유형 주석이 없으므로 '유형' 식에 암묵적으로 '임의' 유형이 지정됩니다. 첫 번째 스니펫은 내가 작업하고 있는 코드이며, 아래는 에러입니다.코드에 있는 모든 "수익률 선택" 부분에서 발생합니다.다음 단계는 잘 모르겠습니다. function* onLoadingDomainsresult() { const pathname = yield select(getPathname); interface Params { hastag: string; } 'yield' expression implicitly results in an 'any' type because its containing generator lacks a return-type annotation. TS7057 113 | 114 | fun..

programing 2023.03.01

create-module-app: http 대신 https를 사용하는 방법

create-module-app: http 대신 https를 사용하는 방법 'create-react-app' 환경에서 dev에서 https를 사용하는 방법을 아는 사람이 있는지 궁금합니다.README나 빠른 검색에서는 그것에 대해 아무것도 볼 수 없습니다.https://localhost:3000 이 동작하거나 https://localhost:3001 이 동작하도록 하겠습니다. ★★HTTPS=true 명령어를 하기 전에 명령어를 실행합니다. 문서 구현에서는 HTTPS 환경 변수를 사용하여 서버를 시작할 때 사용할 프로토콜을 결정합니다.패키지를 편집할 수 있습니다.json 스크립트 섹션은 다음과 같습니다. "scripts": { "start": "set HTTPS=true&&react-scripts star..

programing 2023.03.01