«reactjs» 태그된 질문

내 reducers. 그러나 브라우저에서 디버깅 할 때 내 작업이 올바르게 호출되었는지 그리고 그에 따라 상태가 수정되었는지 확인하고 싶습니다. 다음과 같은 것을 찾고 있습니다. window._redux.store ... 브라우저에서 콘솔에 입력하고 어떻게 진행되는지 확인할 수 있습니다. 어떻게 할 수 있습니까?

87 javascript  reactjs  redux 

create-react-app으로 개발하는 동안 내 브라우저는 경고시 디버거 모드로 들어갑니다. react-dev-tools의 소스 코드를 중단합니다. // --- Welcome to debugging with React DevTools --- // This debugger statement means that you've enabled the "break on warnings" feature. // Use the browser's Call Stack panel to step out of this override function- // …

87 reactjs  javascript-debugger 

reactjsES6 표준을 사용하여 작성된 앱 이 있으며 webpack이를 빌드 하는 데 사용합니다. webpack로드 js사용하여 모듈 babel-loader. 구체적으로 다음 버전의 패키지를 사용합니다. ├── babel@5.8.34 ├── babel-core@5.8.34 ├── babel-loader@5.4.0 └── webpack@1.12.6 그러나 빌드 후 IE 10에서는 다음과 같은 오류가 발생 'Symbol' is undefined합니다. babel를 정의 해야하지 Symbol않습니까? 특정 구성이 webpack있거나 babel작동하도록 설정해야합니까? …

87 reactjs  webpack  babeljs 

인터넷 익스플로러에서 React.js 애플리케이션을 테스트 해봤는데 ES6 / 7 코드가 Array.prototype.includes()깨지는 것을 발견했습니다. 저는 create-react-app 을 사용하고 있으며 모든 사람이 필요로하지 않기 때문에 많은 polyfill을 포함하지 않기로 선택했으며 빌드 시간이 느려집니다 (예를 들어 here 및 here 참조 ). 문서 (작성 당시)는 다음을 제안합니다. 런타임 지원이 필요한 다른 ES6 + 기능 …

87 javascript  reactjs  ecmascript-6  create-react-app  ecmascript-7 

&와 같은 문자를 포함 할 수있는 문자열이있는 소품이 있습니다. 공백도 포함됩니다. 모든 공백을  . 쉽게 할 수있는 방법이 있습니까? 이 구문을 사용하여 렌더링 할 수는 없습니다. <div dangerouslySetInnerHTML={{__html: myValue}} /> 먼저 HTML 엔티티를 마크 업으로 바꿔야하기 때문입니다. 나는 이것을하고 싶지 않다. 너무 낮은 수준 인 것 같다. 내가 할 수있는 …

87 html  reactjs 

평범한 오래된 자바 스크립트에서는 DIV가 있습니다. <div class="movie" id="my_movie"> 및 다음 자바 스크립트 코드 var myMovie = document.getElementById('my_movie'); myMovie.addEventListener('nv-enter', function (event) { console.log('change scope'); }); 이제이 구성 요소 내부의 render 메서드에 React 구성 요소가 있으며 내 div를 반환합니다. 내 사용자 지정 이벤트에 대한 이벤트 리스너를 추가하려면 어떻게해야합니까? (이 라이브러리를 TV …

87 reactjs 

줄 바꿈이 포함 된 텍스트 문자열이 있고 다음과 같이 렌더링한다고 가정합니다. render() { var text = "One\nTwo\nThree"; return <div>{text}</div>; } HTML에서 줄 바꿈은 줄 바꿈으로 렌더링되지 않습니다. React에서 어떻게해야합니까? <br>태그 로 변환하고 dangerouslySetInnerHTML. 다른 방법이 있습니까?

87 reactjs 

스타일 구성 요소에서 호버를 처리하는 가장 좋은 방법은 무엇입니까? 마우스를 가져 가면 버튼이 표시되는 래핑 요소가 있습니다. 구성 요소에 일부 상태를 구현하고 마우스 오버시 속성을 토글 할 수 있지만 styled-cmponents로이를 수행하는 더 좋은 방법이 있는지 궁금합니다. 다음과 같은 것은 작동하지 않지만 이상적입니다. const Wrapper = styled.div` border-radius: 0.25rem; overflow: hidden; …

87 reactjs  styled-components 

라우팅에 반응하여보기를 변경하는 데 문제가 있습니다. 사용자 목록 만 표시하고 각 사용자를 클릭하면 세부 정보 페이지로 이동해야합니다. 라우터는 다음과 같습니다. import React from "react"; import ReactDOM from "react-dom"; import { BrowserRouter } from 'react-router-dom'; import Users from "./components/Users"; import { Router, Route } from "react-router"; import Details from "./components/Details"; ReactDOM.render(( …

87 reactjs  react-router 

문제 ref인라인 함수 정의를 사용하여 반응 을 설정하고 있습니다. render = () => { return ( <div className="drawer" ref={drawer => this.drawerRef = drawer}> 그런 다음 componentDidMountDOM 참조가 설정되지 않았습니다. componentDidMount = () => { // this.drawerRef is not defined 내 이해는 ref콜백이 마운트 중에 실행되어야한다는 것입니다. 그러나 console.log문을 추가 하면 …

87 javascript  reactjs 

다음 코드가 있습니다. eslint throw : 반응 / 소품 유형 onClickOut; 소품 유효성 검사에 누락되었습니다. 반응 / 소품 유형 어린이; 소품 유효성 검사에 누락되었습니다. propTypes 정의되었지만 eslint가 인식하지 못합니다. import React, { Component, PropTypes } from 'react'; class IxClickOut extends Component { static propTypes = { children: PropTypes.any, onClickOut: PropTypes.func, …

87 javascript  reactjs  eslint  flowtype 

React 구성 요소를 사용하는 복잡한 웹 페이지가 있으며 페이지를 정적 레이아웃에서 더 반응이 빠르고 크기 조정이 가능한 레이아웃으로 변환하려고합니다. 그러나 저는 React에서 계속 한계에 부딪히며 이러한 문제를 처리하기위한 표준 패턴이 있는지 궁금합니다. 내 특정 경우에는 display : table-cell 및 width : auto를 사용하여 div로 렌더링되는 구성 요소가 있습니다. 안타깝게도 구성 …

86 javascript  reactjs  responsive 

나는 redux와 비동기를 배우는 간단한 앱을 만들고 있습니다. 나는 모든 것을 작동 시켰습니다. 이제 실제 상태를 웹 페이지에 표시하고 싶습니다. 이제 render 메서드에서 실제로 상점의 상태에 어떻게 액세스합니까? 다음은 내 코드입니다 (방금 배우기 때문에 모든 것이 한 페이지에 있습니다). const initialState = { fetching: false, fetched: false, items: [], error: …

86 javascript  asynchronous  reactjs  redux  react-redux 

Facebook 사용 React. 설정 페이지 textarea에는 사용자가 여러 줄 텍스트 (제 경우에는 주소)를 입력 할 수있는 여러 줄이 있습니다. <textarea value={address} /> 주소를 표시하려고 할 때와 같이 {address}줄 바꿈이 표시되지 않고 모두 한 줄에 있습니다. <p>{address}</p> 이것을 해결하는 방법에 대한 아이디어가 있습니까?

86 javascript  reactjs  textarea 

React에서는 상태가 즉시 업데이트되지 않으므로 setState(state, callback). 하지만 Redux에서 어떻게할까요? 를 호출 한 후 this.props.dispatch(updateState(key, value))즉시 업데이트 된 상태로 무언가를해야합니다. React에서하는 것과 같은 최신 상태로 콜백을 호출 할 수있는 방법이 있습니까?

86 javascript  reactjs  redux