«reactjs» 태그된 질문

문서에 따르면 : componentDidUpdate()업데이트가 발생한 직후에 호출됩니다. 이 메서드는 초기 렌더링에는 호출되지 않습니다. 새로운 useEffect()후크를 사용하여 를 시뮬레이션 할 수 componentDidUpdate()있지만 useEffect()처음으로도 렌더링 할 때마다 실행되는 것처럼 보입니다 . 초기 렌더링에서 실행되지 않도록하려면 어떻게합니까? 아래 예에서 볼 수 있듯이 componentDidUpdateFunction는 초기 렌더링 componentDidUpdateClass중에 인쇄 되지만 초기 렌더링 중에 인쇄되지 않았습니다. …

106 javascript  reactjs  react-hooks 

클라이언트 용 감속기가 하나 있고 AppToolbar 용 감속기가 하나 있고 다른 감속기가 있습니다. 이제 클라이언트를 삭제하기위한 가져 오기 작업을 생성했다고 가정 해 보겠습니다. 실패하면 Clients reducer에 몇 가지 작업을 수행해야하는 코드가 있지만 AppToolbar에 일부 전역 오류를 표시하고 싶습니다. 그러나 Clients와 AppToolbar 감속기는 상태의 동일한 부분을 공유하지 않으며 감속기에서 새 작업을 …

105 javascript  reactjs  redux 

게시물 목록을 렌더링하고 있습니다. 각 게시물에 대해 href 문자열의 일부로 게시물 ID를 사용하여 앵커 태그를 렌더링하고 싶습니다. render: function(){ return ( <ul> { this.props.posts.map(function(post){ return <li key={post.id}><a href='/posts/'{post.id}>{post.title}</a></li> }) } </ul> ); 어떻게 각 게시물의 HREF의 가질 수 있도록해야합니까 /posts/1, /posts/2등?

105 javascript  reactjs 

내가 가진 응용 프로그램 내장 ReactNative을 모두 iOS 용 및 안드로이드 ListView. 목록보기를 유효한 데이터 소스로 채울 때 화면 하단에 다음 경고가 인쇄됩니다. 경고 : 배열 또는 반복기의 각 하위에는 고유 한 "키"소품이 있어야합니다. 의 렌더링 방법을 확인하십시오 ListView. 이 경고의 목적은 무엇입니까? 메시지 후 그들은 이 페이지로 연결됩니다 . …

105 facebook  listview  reactjs  react-native 

Webpack의 로더와 플러그인의 차이점은 무엇입니까? 플러그인에 대한 문서 는 다음과 같습니다. 플러그인을 사용하여 일반적으로 웹팩의 번들과 관련된 기능을 추가합니다. babel이 jsx / es2015 변환에 로더를 사용한다는 것을 알고 있지만 다른 일반적인 작업 (예 : copy-webpack-plugin) 대신 플러그인을 사용하는 것처럼 보입니다.

104 javascript  reactjs  webpack 

따라서 ES6를 통해 웹팩에서 이미지와 아이콘을 가져 오는 현재 작업 흐름은 다음과 같습니다. import cat from './images/cat1.jpg' import cat2 from './images/cat2.svg' import doggy from './images/doggy.png' import turtle from './images/turtle.png' <img src={doggy} /> 이것은 빨리 지저분해진다. 내가 원하는 것은 다음과 같습니다. import * from './images' <img src={doggy} /> <img src={turtle} /> …

104 reactjs  webpack  ecmascript-6 

/#/react-router를 사용할 때 브라우저의 주소 표시 줄에 표시 되지 않도록 하는 방법이 있습니까? 그것은 ReactJS입니다. 즉, 링크를 클릭하여 새 경로로 이동하면 localhost:3000/#/또는 localhost:3000/#/about. 경로에 따라 다릅니다.

103 reactjs  react-router 

React 앱에서 Lint를 실행하고 있는데이 오류가 발생합니다. error JSX props should not use arrow functions react/jsx-no-bind 그리고 이것은 내가 화살표 기능을 실행하는 곳입니다 (내부 onClick). {this.state.photos.map(tile => ( <span key={tile.img}> <Checkbox defaultChecked={tile.checked} onCheck={() => this.selectPicture(tile)} style={{position: 'absolute', zIndex: 99, padding: 5, backgroundColor: 'rgba(255, 255, 255, 0.72)'}} /> <GridTile title={tile.title} subtitle={<span>by …

103 javascript  reactjs  ecmascript-6  jsx  arrow-functions 

조건부 렌더링이있는 뷰 구성 요소가 있다고 가정 해 보겠습니다. render(){ if (this.state.employed) { return ( <div> <MyInput ref="job-title" name="job-title" /> </div> ); } else { return ( <div> <MyInput ref="unemployment-reason" name="unemployment-reason" /> <MyInput ref="unemployment-duration" name="unemployment-duration" /> </div> ); } } MyInput은 다음과 같습니다. class MyInput extends React.Component { ... render(){ …

103 javascript  reactjs 

클래스를 사용하지 않고 반응의 기능적 상태 비 저장 구성 요소에서 PropType을 어떻게 사용합니까? export const Header = (props) => ( <div>hi</div> )

103 javascript  reactjs  react-props  react-proptypes 

나는 여전히 React에서 상당히 새롭지 만 천천히 진행하면서 내가 붙어있는 무언가를 만났습니다. 저는 React에서 "타이머"구성 요소를 구축하려고합니다. 솔직히 말해서 제가이 작업을 올바르게 수행하고 있는지 (또는 효율적으로) 수행하고 있는지 모르겠습니다. 아래에있는 내 코드에서, 나는 개체를 반환 상태를 설정 { currentCount: 10 }하고 놀겠다는 거를하고있다 componentDidMount, componentWillUnmount그리고 render나는 10에서 9 "카운트 다운"의 …

103 javascript  reactjs  settimeout  state 

React-Router v3에서 v4로 마이그레이션하는 데 약간의 문제가 있습니다. v3에서는 어디서든이 작업을 수행 할 수있었습니다. import { browserHistory } from 'react-router'; browserHistory.push('/some/path'); v4에서 어떻게 이것을 달성합니까? withRouter컴포넌트에있을 때 hoc , 반응 컨텍스트 또는 이벤트 라우터 소품을 사용할 수 있다는 것을 알고 있습니다. 하지만 나에게는 그렇지 않습니다. v4에서 NavigatingOutsideOfComponents 의 동등성을 찾고 …

103 reactjs  react-router 

나는 react.js에 새로 왔으며 서버에서 데이터를 가져 와서 다음과 같이 사용하는 하나의 구성 요소를 구현했습니다. CallEnterprise:function(TenantId){ fetchData('http://xxx.xxx.xx.xx:8090/Enterprises?TenantId='+TenantId+' &format=json').then(function(enterprises) { EnterprisePerspectiveActions.getEnterprise(enterprises); }).catch(function() { alert("There was some issue in API Call please contact Admin"); //ComponentAppDispatcher.handleViewAction({ // actionType: MetaItemConstants.RECEIVE_ERROR, // error: 'There was a problem getting the enterprises' //}); }); }, 구성 파일에 …

103 javascript  reactjs  configuration  webpack  flux 

이 간단한 일은 쉽게 해낼 수 있어야하지만, 그것이 얼마나 복잡한 지에 대해 머리를 뽑아 내고 있습니다. 제가하고 싶은 것은 React 컴포넌트의 마운트와 언 마운트를 애니메이션화하는 것뿐입니다. 지금까지 시도한 내용과 각 솔루션이 작동하지 않는 이유는 다음과 같습니다. ReactCSSTransitionGroup -CSS 클래스를 전혀 사용하지 않고 모든 JS 스타일이므로 작동하지 않습니다. ReactTransitionGroup-이 하위 수준 …

103 animation  reactjs  css-animations  greensock  react-motion 

제목에 모든 것이 나와 있습니다. componentDidMountDOM 액세스가 필요한 모든 것에 왜 적절한 지 이해 하지만 AJAX 요청이 반드시 필요한 것은 아닙니다. 무엇을 제공합니까?

102 reactjs