«reactjs» 태그된 질문

React (React.js 또는 ReactJS라고도 함)는 사용자 인터페이스를 구축하기 위해 Facebook에서 개발 한 JavaScript 라이브러리입니다. 선언적이고 구성 요소 기반의 패러다임을 사용하며 효율적이고 유연합니다.

6
Jest에서 버튼 클릭 시뮬레이션
버튼 클릭을 시뮬레이션하는 것은 매우 쉽고 표준적인 작업처럼 보입니다. 그러나 Jest.js 테스트에서는 작동하지 않습니다. 이것은 내가 시도한 것입니다 (또한 jQuery를 사용하여 수행합니다).하지만 아무것도 트리거하지 않는 것 같습니다. import { mount } from 'enzyme'; page = <MyCoolPage />; pageMounted = mount(page); const button = pageMounted.find('#some_button'); expect(button.length).toBe(1); // It finds it alright …
1
Create-React-App 애플리케이션에서 index.html과 index.js 간의 연결은 어디에 있습니까?
나는 반작용 만들기 앱으로 재생 시작 해요,하지만 난 어떻게 이해할 수없는 index.js내부를로드됩니다 index.html. 다음은 html 코드입니다. <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> <!-- Notice the use of %PUBLIC_URL% in the tag above. It will be replaced with the URL of the …
7
react-router에서 경로에 대한 액세스를 제한하는 방법은 무엇입니까?
누구든지 react-router에서 특정 경로에 대한 액세스를 제한하는 방법을 알고 있습니까? 특정 경로에 대한 액세스를 허용하기 전에 사용자가 로그인했는지 확인하고 싶습니다. 간단 할 거라고 생각했지만 문서에 방법이 명확하지 않습니다. <Route>구성 요소를 정의 할 때 설정 해야합니까, 아니면 구성 요소 처리기 내에서 처리해야합니까? <Route handler={App} path="/"> <NotFoundRoute handler={NotFound} name="not-found"/> <DefaultRoute handler={Login} name="login"/> …
4
extract-text-webpack-plugin React를 사용할 때 창 정의되지 않음 오류
내 반응 구성 요소를 빌드하기 위해 webpack을 사용하고 extract-text-webpack-plugin있으며 생성 된 js 파일에서 내 CSS를 분리 하는 데 사용하려고 합니다. 그러나 구성 요소를 빌드하려고하면 다음 오류가 발생 Module build failed: ReferenceError: window is not defined합니다.. 내 webpack.config.js 파일은 다음과 같습니다. var webpack = require('webpack'); var ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = …
82 reactjs  webpack 
4
react-redux 컨테이너 구성 요소에 소품 전달
React Native Navigator 구성 요소 내에서 생성 된 react-redux 컨테이너 구성 요소가 있습니다. 내비게이터를이 컨테이너 구성 요소에 소품으로 전달하여 프레젠테이션 구성 요소 내부에서 버튼을 누른 후 개체를 탐색기 스택으로 푸시 할 수 있기를 원합니다. react-redux 컨테이너 구성 요소가 제공하는 모든 상용구 코드를 직접 작성할 필요없이이 작업을 수행하고 싶습니다 (또한 여기서도 …
2
컴포넌트의 Reactjs 비동기 렌더링
내 ajax 요청이 완료된 후 구성 요소를 렌더링하고 싶습니다. 아래에서 내 코드를 볼 수 있습니다. var CategoriesSetup = React.createClass({ render: function(){ var rows = []; $.get('http://foobar.io/api/v1/listings/categories/').done(function (data) { $.each(data, function(index, element){ rows.push(<OptionRow obj={element} />); }); return (<Input type='select'>{rows}</Input>) }) } }); 하지만 내 ajax 요청의 done 메서드 내에서 렌더링을 반환하기 …
8
형제 요소를 부모 태그에 래핑하지 않고 렌더링하려면 어떻게해야합니까?
대부분의 경우 상위 태그가있는 것은 문제가되지 않습니다. React.createClass({ render: function() { return ( <tbody> <tr><td>Item 1</td></tr> <tr><td>Item 2</td></tr> </tbody> ); } }); 그러나 부모없이 하나의 렌더링 함수에 형제 요소가있는 것이 합리적 일 경우가 있습니다. 특히 테이블의 경우 테이블 행을 div. React.createClass({ render: function() { return ( <tr><td>Item 1</td></tr> <tr><td>Item 2</td></tr> …
82 reactjs 
15
React-Router 용 Google Analytics를 설정하는 방법은 무엇입니까?
내 반응 사이트에서 Google Analytics를 설정하려고하는데 몇 가지 패키지를 발견했지만 그중 어느 것도 예제 측면에서 설정 한 종류가 없습니다. 누군가가 이것에 대해 밝힐 수 있기를 바랐습니다. 내가보고있는 패키지는 react-ga 입니다. 내 렌더링 방법은 index.js다음과 같습니다. React.render(( <Router history={createBrowserHistory()}> <Route path="/" component={App}> <IndexRoute component={Home} onLeave={closeHeader}/> <Route path="/about" component={About} onLeave={closeHeader}/> <Route path="/gallery" …
10
React Stateless 구성 요소의 이벤트 처리기
React stateless 구성 요소에서 이벤트 핸들러를 만드는 최적의 방법을 찾으려고합니다. 다음과 같이 할 수 있습니다. const myComponent = (props) => { const myHandler = (e) => props.dispatch(something()); return ( <button onClick={myHandler}>Click Me</button> ); } 여기서 단점은이 컴포넌트가 렌더링 될 때마다 새로운 "myHandler"함수가 생성된다는 것입니다. 구성 요소 속성에 계속 액세스 할 …
6
reactjs에서 문서 키 누르기 듣기
escape눌러서 활성 반응 부트 스트랩 팝 오버를 닫기 위해 바인딩하고 싶습니다 . 여기에 코드가 있습니다. _handleEscKey:function(event){ console.log(event); if(event.keyCode == 27){ this.state.activePopover.hide(); } }, componentWillMount:function(){ BannerDataStore.addChangeListener(this._onchange); document.addEventListener("click", this._handleDocumentClick, false); document.addEventListener("keyPress", this._handleEscKey, false); }, componentWillUnmount: function() { BannerDataStore.removeChangeListener(this._onchange); document.removeEventListener("click", this._handleDocumentClick, false); document.removeEventListener("keyPress", this._handleEscKey, false); }, 하지만 아무 키나 눌러도 콘솔에 아무것도 기록되지 …
3
이것이 의미하는 바는… React JSX에서 휴식
이 React Router Dom v4 예제 https://reacttraining.com/react-router/web/example/auth-workflow 를 보면 PrivateRoute 구성 요소가 다음과 같은 나머지 소품 을 분해 한다는 것을 알 수 있습니다. const PrivateRoute = ({ component: Component, ...rest }) => ( <Route {...rest} render={props => ( fakeAuth.isAuthenticated ? ( <Component {...props}/> ) : ( <Redirect to={{ pathname: '/login', …
5
모듈을 찾을 수 없음 : 'redux'
create-react-appcli를 사용하여 새로운 반응 애플리케이션을 만들었습니다 . 그리고 내가 추가 한 'react-redux'사용하여 라이브러리를 npm install --save react-redux. 에서 package.jsonI 있습니다 : "react-redux": "^4.4.5" 불행히도 앱이 컴파일되지 않고 다음과 같이 불평합니다. Error in ./~/react-redux/lib/utils/wrapActionCreators.js Module not found: 'redux' in C:\Users\Salman\Desktop\Courses\Internship\React\Youtube-Front-End\node_modules\react-redux\lib\utils @ ./~/react-redux/lib/utils/wrapActionCreators.js 6:13-29 무슨 뜻인지 모르겠어요? 다음은 완전한 컨테이너입니다. import React,{Component} …
5
반복되는 React 요소를 어떻게 렌더링 할 수 있습니까?
ReactJS에서 반복되는 요소를 렌더링하는 코드를 작성했지만 얼마나 못 생겼는지 싫어합니다. render: function(){ var titles = this.props.titles.map(function(title) { return <th>{title}</th>; }); var rows = this.props.rows.map(function(row) { var cells = []; for (var i in row) { cells.push(<td>{row[i]}</td>); } return <tr>{cells}</tr>; }); return ( <table className="MyClassName"> <thead> <tr>{titles}</tr> </thead> <tbody>{rows}</tbody> </table> ); …
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.