c10106

ngrok가 Resact dev 서버에 연결을 시도할 때 잘못된 호스트 헤더 모바일 장치에서 리액션 응용 프로그램을 테스트하려고 해.ngrok를 사용하여 로컬 서버를 다른 장치에서 사용할 수 있도록 하고 있으며, 다른 다양한 애플리케이션에서 이 기능을 사용할 수 있게 되었다.그러나 react dev 서버에 ngrok를 연결하려고 하면 다음과 같은 오류가 나타난다. Invalid Host Header 나는 기본적으로 리액션이 다른 소스의 모든 요청을 차단한다고 믿는다.생각나는 거 있어?유사한 문제가 발생하여 브라우저에서 응용프로그램을 직접 보는 데까지 작동하는 두 가지 솔루션을 발견함 ngrok http 8080 -host-header="localhost:8080" ngrok http --host-head..

대응: 위험하게 SetInner를 사용하여 삽입할 때 스크립트 태그가 작동하지 않음HTML 위험한 SetInner를 사용하여 서버에서 보낸 html을 div에 표시하도록 설정하려고 하는 중대응의 HTML 속성.나도 그 안에 스크립트 태그를 가지고 있고, 그 html 안에서 동일한 기능을 사용한다.나는 여기서 JSFiddle의 오류의 예를 들었다. 테스트 코드: var x = 'alert("this.is.sparta");function pClicked() {console.log("p is clicked");}Hello'; var Hello = React.createClass({ displayName: 'Hello', render: function() { return (); } }); 확인해보니 DOM에 스..

react-reason v4에서 서로 다른 경로 경로에 동일한 구성 요소 사용 나는 아래와 같이 나의 리액션 앱에서 양식을 추가/편집하기 위한 동일한 구성 요소를 별도의 루트로 만들려고 한다. 이제 manageClient 구성 요소에서 쿼리 매개 변수를 구문 분석(편집 경로에서 클라이언트 ID로 쿼리 문자열을 전달함)하고 전달된 쿼리 매개 변수를 기준으로 조건부로 렌더링한다. 문제는 이것이 다시 전체 구성요소를 재마운트하지 않는다는 것이다.편집 페이지가 열리면 사용자가 구성 요소를 클릭하면 URL이 변경되지만 구성 요소가 다시 로드되지 않아 편집 페이지에 남아 있다고 가정하십시오. 이 문제를 해결할 방법이 있을까?다른 사용key각 경로에 대해 구성 요소를 재구축해야 한다. 한 가지 해결책은 인라인 기능을..

React onClick and preventDefault() 링크 새로 고침/redirect? 리액션으로 링크 렌더링: render: -> `upvote` 그 다음, 위에 나는 상향표 기능을 가지고 있다. upvote: -> // do stuff (ajax) 링크가 있기 전에 나는 그 장소에 있었지만 나는 링크로 전환해야 하고 내가 클릭할 때마다 여기에 문제가 생겼어..upvotes그 페이지가 새로워져서 지금까지 내가 해왔던 것. event.preventDefault() - 작동하지 않음 upvote: (e) -> e.preventDefault() // do stuff (ajax) event.stoppagement() - 작동하지 않음 upvote: (e) -> e.stopPropagation() //..

반응 JS - 검색되지 않은 TypeError: this.props.data.map은 함수가 아님 reactjs로 작업 중인데 (파일 또는 서버에서) JSON 데이터를 표시할 때 이 오류를 방지할 수 없는 것 같음: Uncaught TypeError: this.props.data.map is not a function 내가 살펴본 바로는: 반응 코드 던지기 "TypeError: this.props.data.map은 함수가 아님" react.js this.props.data.map()은 함수가 아님 이것들 중 어느 것도 내가 문제를 해결하는 데 도움이 되지 않았다.페이지가 로드된 후, 이.data.props가 정의되지 않았는지(그리고 JSON 개체와 동등한 값을 가지고 있음) 확인할 수 있다.window...

VSCode에서 jsx 자동 들여쓰기 방법 VSCode가 Jsx에서 HTML 요소를 자동으로 들여쓰지 않는 것 같으십니까? 그것을 고칠 방법이 없을까? 업데이트: Atom의 경우: 입력 시, 원자가 다음을 보여줄 것이다. 내가 누른 후에return키, 결과는 다음과 같다(커서의 위치에 주의: VSCode에 있는 동안: 언어 모드를 JavaScript Resact로 변경해 보십시오. 명령 팔레트를 여십시오. 유형change language mode 누르다 유형javascript react 누르다 이 작업이 완료되면 왼쪽 하단 모서리에 자바스크립트 리액션 모드가 나타난다. 해당 모드로 전환되면 문서를 다시 포맷하십시오. 언어를 다음으로 변경Javascript React다음 명령을 사용하십시오. alt + s..

객체를 jsx에 소품으로 전달 Jsx에 전달하고 싶은 공통 키 값 소품이 여러 개 들어 있는 개체를 가지고 있다.이와 비슷한 것: const commonProps = {myProp1: 'prop1',myProp2: 'prop2'}; 나는 이것이 개별 소품을 전달하는 역할을 하기를 원한다. 이것이 가능한가? 이것이 가능한가? 그래, 가능하지만 네가 보내는 방법은 정확하지 않아. 의 의미다음과 같은 경우: 따라서 값을 지정하지 않으면 기본적으로true. 객체를 통과하려면 다음과 같이 써야 한다. const commonProps = {myProp1: 'prop1',myProp2: 'prop2'}; 업데이트: 객체가 있고 모든 속성을 별도의 받침대로 전달하려면 다음과 같이 입력하십시오. 스프레드 오퍼레이터를 사..

반응에서 clsx를 사용하는 방법 나는 대응의 구성요소에 클래스 이름을 할당하는 데 clsx의 몇 가지 용도를 이해하려고 한다. 시공 className={clsx(classes.menuButton, open && classes.hide)} 충분히 명확하다.'classes.menuButton'을 적용하며, 'classes'를 적용하기도 한다.hide'는 부울의 값이 'open'이면 hide이다. 내 질문은 이 두 번째 예와 관련이 있다. className={clsx(classes.appBar, {[classes.appBarShift]: open })} 이것은 'classes.appBar'를 적용할 것이다.그러나 두 번째 매개변수의 의미는 무엇인가?clsx일반적으로 주어진 것을 조건부로 적용하기 위해 사용된..

ReactJS 통신하는 두 구성 요소 나는 ReactJS를 막 시작했는데 내가 가지고 있는 문제에 약간 집착하고 있어. 내 애플리케이션은 기본적으로 필터와 레이아웃을 변경하는 버튼이 있는 목록이다.현재 세 가지 구성 요소를 사용하고 있으며,그리고, 이제 확실히 내가 설정을 변경할 때에 어떤 방법을 촉발시키고 싶다.내 견해를 업데이트하기 위해서. 어떻게 하면 이 세 가지 구성요소가 서로 상호 작용하도록 할 수 있을까? 아니면 그냥 변경할 수 있는 글로벌 데이터 모델이 필요한가?가장 좋은 접근법은 이러한 요소들을 어떻게 배열할 것인지에 달려 있다.지금 바로 떠오르는 몇 가지 시나리오: 의 하위 구성 요소 둘 다그리고 임. 그리고완전히 분리된 뿌리 구성 요소에서 살다..

웹 팩-dev-server가 리액터로부터 진입점을 허용하는 방법 웹팩-dev-server를 리액터러터와 함께 개발 중인 앱을 만들고 있다. 웹팩-dev-server는 당신이 한 장소에 공공 진입점을 갖게 될 것이라는 가정(예: "/")을 기반으로 구축된 것으로 보이는 반면, 리액트라우터는 무제한의 진입점을 허용한다. 웹팩-dev-server의 이점, 특히 생산성에 뛰어난 핫 재로드 기능을 원하지만, 리액터-라우터에 설정된 경로를 로딩할 수 있기를 여전히 원한다. 어떻게 그들이 함께 일하도록 그것을 실행할 수 있었을까?이를 허용하는 방법으로 웹팩-dev-server 앞에서 익스프레스 서버를 운영할 수 있는가?당신은 설정해야 한다.historyApiFallback의WebpackDevServer이것이 효과가 ..