반응형

ReactJS 18

리액트 컨스트럭터 ES6 대 ES7

리액트 컨스트럭터 ES6 대 ES7 Respect tutorials 페이지에서 ES6가 컨스트럭터 함수를 사용하여 이렇게 상태를 초기화한다는 내용을 읽었습니다. export class Counter extends React.Component { constructor(props) { super(props); this.state = {count: props.initialCount}; } tick() { this.setState({count: this.state.count + 1}); } render() { return ( Clicks: {this.state.count} ); } } Counter.propTypes = { initialCount: React.PropTypes.number }; Counter.d..

programing 2023.04.06

인터페이스 상태 및 타이프스크립트의 소품 반응

인터페이스 상태 및 타이프스크립트의 소품 반응 저는 리액트뿐만 아니라 TypeScript를 사용하는 프로젝트를 진행하고 있으며, 둘 다 처음입니다.제 질문은 TypeScript의 인터페이스와 그것이 소품이나 상태와 어떻게 관련되어 있는지에 대한 것입니다.실제로 무슨 일이 일어나고 있나요?인터페이스 소품 및 상태를 선언하지 않는 한 응용 프로그램은 전혀 실행되지 않지만, 리액트 컨스트럭터 기능을 통해 상태를 사용하고 있으며, 이러한 모든 정보가 '인터페이스 MyProps' 또는 '인터페이스 MyStates'에 들어가는 예를 본 적이 있습니다.다음 코드를 예로 들어 보겠습니다. "use strict"; import * as React from 'react' import NavBar from './compon..

programing 2023.04.01

이걸 쓰면 어떻게 되는 거야?react 구성 요소에서 setState를 여러 번 사용하시겠습니까?

이걸 쓰면 어떻게 되는 거야?react 구성 요소에서 setState를 여러 번 사용하시겠습니까? 이걸 쓰면 어떻게 되는지 확인하고 싶었어요.set 스테이트를 여러 번 합니다(논의를 위해 2회).컴포넌트가 두 번 렌더링되는 줄 알았는데 한 번 렌더링된 것 같습니다.또 다른 기대는 setState에 대한 두 번째 콜이 첫 번째 콜보다 우선될 수 있다는 것이었습니다만, 예상하셨던 대로 잘 작동했습니다. JSfiddle 링크 var Hello = React.createClass({ render: function() { return ( Hello {this.props.name} ); } }); var CheckBox = React.createClass({ getInitialState: function() { r..

programing 2023.04.01

React JS: 부모 내부 자식 컴포넌트의 setState

React JS: 부모 내부 자식 컴포넌트의 setState 자식 구성 요소에서 부모에 대해 setState를 수행할 때 권장되는 패턴은 무엇입니까? var Todos = React.createClass({ getInitialState: function() { return { todos: [ "I am done", "I am not done" ] } }, render: function() { var todos = this.state.todos.map(function(todo) { return {todo}; }); return Todo(s) {todos} ; } }); var TodoForm = React.createClass({ getInitialState: function() { return { tod..

programing 2023.03.27

JSX 및 React에서 onBlur 사용

JSX 및 React에서 onBlur 사용 사용자가 확인 필드를 떠난 후에만 오류를 표시하는 비밀번호 확인 기능을 생성하려고 합니다.저는 페이스북의 리액트 JS와 함께 일하고 있습니다.입력 컴포넌트는 다음과 같습니다. 이것은 render Password Confirm Error 입니다. renderPasswordConfirmError: function() { if (this.state.password !== this.state.password2) { return ( Please enter the same password again. ); } return null; }, 페이지를 실행할 때 모순되는 비밀번호를 입력해도 메시지가 표시되지 않습니다. 여기에는 몇 가지 문제가 있습니다. 1: onBlur가 콜백..

programing 2023.03.27

기능하는 setState를 사용하는 경우

기능하는 setState를 사용하는 경우 저는 지난 며칠 동안 다양한 요소를 작성할 수 있는 몇 가지 튜토리얼과 설명을 살펴보면서 React를 배워왔습니다. 가장은 바로, 「이것」입니다.setState하는 기능state포포컴컴 예를 들어 다음과 같은 클래스가 있다고 가정합니다. class Photos extends React.Component { constructor() { super() state = { pictures: [] } } componentDidMount() { // This is where the fetch and setState will occur (see below) } render() { return { {this.state.pictures} } } } 이 예에서는 API에서 이미지를..

programing 2023.03.22

농담 테스트를 실행할 때 모든 테스트 설명을 표시하는 옵션이 있습니까?

농담 테스트를 실행할 때 모든 테스트 설명을 표시하는 옵션이 있습니까? 저는 Create-React 앱 프로젝트에서 농담과 효소를 사용하고 있습니다.내가 달릴 때npm test에 합격한 테스트 파일의 이름을 나타내는 출력이 있습니다만, 테스트의 이름도 출력에 포함시키고 싶습니다. 예: Button.test.js it ('renders button', () => { const button = shallow(); expect(toJson(button)).toMatchSnapshot(); }); 현재 npm 테스트를 실행하면 출력은 다음과 같습니다. 패스 src/Button.test.js" 합격 및 불합격 테스트의 수(테스트가 성공한 경우)를 나타냅니다.출력에 "렌더 버튼" 및 기타 테스트 설명(rspec 테..

programing 2023.03.22

리액트 라우터를 사용한 루트 변경 검출

리액트 라우터를 사용한 루트 변경 검출 열람 이력에 따라 몇 가지 비즈니스 로직을 구현해야 합니다. 제가 하고 싶은 일은 다음과 같습니다. reactRouter.onUrlChange(url => { this.history.push(url); }); URL이 갱신되었을 때 리액트라우터로부터 콜백을 수신하는 방법이 있습니까?루트 변경을 검출할 때 기능을 사용할 수 있습니다.사용하고 있는 것을 생각하면react-router v4컴포넌트를 랩으로 감습니다.withRouter에 액세스하기 HOChistory history.listen()unlisten기능.이걸 이용해서unregister고고있있있있다다 루트를 다음과 같이 설정할 수 있습니다. index.displaces를 표시합니다. ReactDOM.render(..

programing 2023.03.22

react/redux에서 bindActionCreators는 언제 사용됩니까?

react/redux에서 bindActionCreators는 언제 사용됩니까? bindActionCreators에 대한 Redx docs의 스테이트는 다음과 같습니다. 의 예bindActionCreators일부 액션 크리에이터를 Redux를 인식하지 못하는 컴포넌트에 전달하고 디스패치나 Redux 스토어를 전달하고 싶지 않은 경우입니다. 요?bindActionCreators/필필???? Redux를 인식하지 못하는 구성 요소는 무엇입니까? 두 옵션의 장점/단점은 무엇입니까? //actionCreator import * as actionCreators from './actionCreators' function mapStateToProps(state) { return { posts: state.posts, ..

programing 2023.03.17

반응 후크의 oldValues와 newValues를 비교하는 방법 useEffect?

반응 후크의 oldValues와 newValues를 비교하는 방법 useEffect? rate, sendAmount 및 receiveAmount의 3가지 입력이 있다고 칩시다.나는 그 3개의 입력을 useEffect 확산 파라미터에 넣었다.규칙은 다음과 같습니다. 변경된 sendAmount가 됩니다.receiveAmount = sendAmount * rate receiveAmount를 합니다.sendAmount = receiveAmount / rate 비율이 바뀌면 는 계산한다.receiveAmount = sendAmount * rate 때sendAmount > 0 내가 계산한다.sendAmount = receiveAmount / rate 때receiveAmount > 0 다음은 문제를 나타내는 코드 및..

programing 2023.03.12
반응형