«reactjs» 태그된 질문

Javascript (ES6) / FaceBook 반응으로 작업하고 크기가 다른 배열의 처음 3 요소를 얻으려고합니다. Linq take (n)와 동일하게 수행하고 싶습니다. 내 Jsx 파일에는 다음이 있습니다. var items = list.map(i => { return ( <myview item={i} key={i.id} /> ); }); 그런 다음 처음 시도한 3 가지 항목을 얻으려면 var map = new …

383 javascript  reactjs 

나는 ( Pete Hunt : React : Rethinking best practice-JSConf EU 2013 ) 에서 React dev 강연을 보았고 발표자는 모델의 더러운 확인이 느릴 수 있다고 언급했습니다. 그러나 대부분의 경우 가상 DOM이 모델보다 커야하므로 가상 DOM 간의 차이를 계산하는 것이 실제로 성능이 떨어 집니까? Virtual DOM (특히 서버 측 렌더링)의 잠재력을 …

372 javascript  dom  reactjs  virtual-dom 

요소의 높이 ( "app-content"라고 함)를 동적으로 설정해야하는 앱이 있습니다. 앱의 "크롬"높이를 빼고 빼서 "응용 프로그램 콘텐츠"높이를 해당 제한 내에서 100 %에 맞게 설정합니다. 바닐라 JS, jQuery 또는 Backbone 뷰에서는 매우 간단하지만 React에서 올바른 프로세스가 무엇인지 알아 내려고 고심하고 있습니다. 아래는 예제 구성 요소입니다. app-content높이를 창의 100 %에서 ActionBarand 의 크기를 …

367 javascript  reactjs 

React Router (v3)의 현재 버전에서 서버 응답을 수락 browserHistory.push하고 적절한 응답 페이지로 이동하는 데 사용할 수 있습니다. 그러나 이것은 v4에서 사용할 수 없으며이를 처리하는 적절한 방법이 무엇인지 잘 모르겠습니다. 이 예에서 Redux를 사용 하면 사용자가 양식을 제출할 때 components / app-product-form.js가 호출 this.props.addProduct(props)됩니다. 서버가 성공하면 사용자는 카트 페이지로 이동합니다. // …

360 reactjs  react-router  react-router-v4 

제어 된 입력이 하나 있다고 생각되는 형식의 간단한 반응 구성 요소가 있습니다. import React from 'react'; export default class MyForm extends React.Component { constructor(props) { super(props); this.state = {} } render() { return ( <form className="add-support-staff-form"> <input name="name" type="text" value={this.state.name} onChange={this.onFieldChange('name').bind(this)}/> </form> ) } onFieldChange(fieldName) { return function (event) { …

359 javascript  node.js  reactjs  react-state 

Redux 라이브러리에 대한 설명서를 읽었으며 다음 예제가 있습니다. 상태를 읽는 것 외에도 컨테이너 구성 요소는 작업을 전달할 수 있습니다. 비슷한 방식으로, 메소드 mapDispatchToProps()를 수신 dispatch()하고 프리젠 테이션 컴포넌트에 삽입하려는 콜백 소품을 리턴 하는 함수를 정의 할 수 있습니다 . 이것은 실제로 의미가 없습니다. mapDispatchToProps이미 가지고있을 때 왜 필요한 mapStateToProps가요? 또한이 …

358 reactjs  redux  react-redux 

내 구조는 다음과 같습니다. Component 1 - |- Component 2 - - |- Component 4 - - - |- Component 5 Component 3 구성 요소 3은 구성 요소 5의 상태에 따라 일부 데이터를 표시해야합니다. 소품은 변경할 수 없으므로 단순히 구성 요소 1의 상태를 저장 한 다음 전달할 수 없습니다. 그리고 …

351 javascript  reactjs  web-deployment 

ReactJS와 JSX를 처음 사용하고 아래 코드에 약간의 문제가 있습니다. className각 속성에 여러 클래스를 추가하려고합니다 li. <li key={index} className={activeClass, data.class, "main-class"}></li> 내 반응 구성 요소는 다음과 같습니다 var AccountMainMenu = React.createClass({ getInitialState: function() { return { focused: 0 }; }, clicked: function(index) { this.setState({ focused: index }); }, render: function() { …

347 javascript  css  reactjs  ecmascript-6 

내 구성 요소의 렌더링 기능에는 다음이 있습니다. render() { const items = ['EN', 'IT', 'FR', 'GR', 'RU'].map((item) => { return (<li onClick={this.onItemClick.bind(this, item)} key={item}>{item}</li>); }); return ( <div> ... <ul> {items} </ul> ... </div> ); } <li>요소를 클릭하면 다음과 같은 오류가 발생합니다. 잡히지 않는 오류 : 불변 위반 : 객체가 …

337 javascript  reactjs 

npx create-react-appnpm v7.0.7 및 Node v15.0.1에서 다음 명령을 사용하여 빈 React 프로젝트를 만들었습니다. 설치됨 : React v17.0.1, node-sass v5.0.0, 그런 다음 빈 .scss 파일을 앱 구성 요소로 가져 오려고했습니다. App.js import './App.scss' function App() { return ( <div className="App"> App </div> ); } export default App; 오류 발생 : Failed …

337 reactjs  webpack  create-react-app  node-sass  sass-loader 

방금 react-routerv3에서 v4 로 교체 했습니다. 그러나의 멤버 함수에서 프로그래밍 방식으로 탐색하는 방법을 잘 모르겠습니다 Component. 즉 handleClick()기능 에서 /path/some/where일부 데이터를 처리 한 후 탐색하고 싶습니다 . 나는 다음과 같이 그것을 사용했다. import { browserHistory } from 'react-router' browserHistory.push('/path/some/where') 그러나 v4에서 이러한 인터페이스를 찾을 수 없습니다. v4를 사용하여 탐색하려면 어떻게해야합니까?

336 reactjs  ecmascript-6  react-router-v4 

다음과 같은 부모 구성 요소에서 전달 된 내용에 따라이 버튼 그룹을 조건부로 표시하고 숨기고 싶습니다. <TopicNav showBulkActions={this.__hasMultipleSelected} /> .... __hasMultipleSelected: function() { return false; //return true or false depending on data } .... var TopicNav = React.createClass({ render: function() { return ( <div className="row"> <div className="col-lg-6"> <div className="btn-group pull-right {this.props.showBulkActions …

334 javascript  css  twitter-bootstrap-3  reactjs  class-attributes 

경고 : 구성 요소가 제어 할 텍스트 유형의 제어되지 않은 입력을 변경하고 있습니다. 입력 요소는 제어되지 않은 상태에서 제어 된 상태로 또는 그 반대로 전환해서는 안됩니다. 구성 요소 수명 동안 제어 또는 제어되지 않은 입력 요소 사용 여부를 결정하십시오. * 다음은 내 코드입니다. constructor(props) { super(props); this.state = { fields: …

331 javascript  reactjs 

양식 섹션을 읽고 있습니다.reactjs설명서를 작성 하고이 코드를 onChange사용 하여 사용법 을 보여 줍니다 ( JSBIN ). var React= require('react'); var ControlledForm= React.createClass({ getInitialState: function() { return { value: "initial value" }; }, handleChange: function(event) { console.log(this.state.value); this.setState({value: event.target.value}); console.log(this.state.value); }, render: function() { return ( <input type="text" value={this.state.value} onChange={this.handleChange}/> ); …

326 javascript  reactjs  react-jsx 

방금 ReactJS를 시작했으며 문제가 조금 있습니다. 내 응용 프로그램은 본질적으로 필터와 레이아웃을 변경하는 버튼이있는 목록입니다. 현재 세 가지 구성 요소를 사용 하고 있습니다 . <list />, < Filters />및 <TopBar />이제 설정을 변경하면 뷰를 업데이트하는 < Filters />몇 가지 방법을 트리거 <list />하려고합니다. 이 3 가지 구성 요소가 서로 상호 …

321 javascript  reactjs