Запитання з тегом «reactjs»

Я працюю з реагуванням Javascript (ES6) / FaceBook і намагаюся отримати перші 3 елементи масиву, який залежить від розміру. Я хотів би зробити еквівалент Linq взяти (n). У своєму файлі Jsx у мене є наступне: var items = list.map(i => { return ( <myview item={i} key={i.id} /> ); }); Потім …

383 javascript  reactjs 

Я побачив розмову про реагентів ( Pete Hunt: React: Переосмислення найкращих практик - JSConf EU 2013 ) і спікер зазначив, що брудна перевірка моделі може бути повільною. Але чи не обчислення різниці між віртуальними DOM насправді навіть менш ефективно, оскільки віртуальна DOM у більшості випадків повинна бути більшою, ніж модель? …

372 javascript  dom  reactjs  virtual-dom 

У мене є додаток, де мені потрібно встановити висоту елемента (давайте скажемо "додаток-вміст") динамічно. Він приймає висоту "хромування" додатка і віднімає його, а потім встановлює висоту "вмісту програми", щоб вона відповідала 100% у межах цих обмежень. Це дуже просто з поглядами на ванільну JS, jQuery або Backbone, але я намагаюся …

367 javascript  reactjs 

У поточній версії React Router (v3) я можу прийняти відповідь сервера та використовувати його browserHistory.push для переходу на відповідну сторінку відповідей. Однак це не доступно в v4, і я не впевнений, що є правильним способом впоратися з цим. У цьому прикладі, використовуючи Redux, компоненти / 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) { …

359 javascript  node.js  reactjs  react-state 

Я читав документацію для бібліотеки Redux, і в ній є такий приклад: Крім зчитування стану, компоненти контейнера можуть відправляти дії. Аналогічним чином ви можете визначити функцію, яка називається, mapDispatchToProps()яка отримує dispatch()метод і повертає реквізит зворотного виклику, який ви хочете ввести в презентаційний компонент. Це насправді не має сенсу. Навіщо вам …

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> Мій компонент React: var AccountMainMenu = React.createClass({ getInitialState: function() { return { focused: 0 }; }, clicked: function(index) { this.setState({ …

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 

Я щойно замінив react-routerз v3 на v4. Але я не впевнений, як програмно орієнтуватися у функції члена a Component. тобто у handleClick()функції, до якої я хочу перейти /path/some/whereпісля обробки деяких даних. Раніше я це робив: import { browserHistory } from 'react-router' browserHistory.push('/path/some/where') Але я не можу знайти такі інтерфейси у …

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"> …

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

Попередження: Компонент змінює неконтрольований ввід тексту типу, яким потрібно керувати. Елементи введення не повинні переходити від неконтрольованих до контрольованих (або навпаки). Вирішіть між використанням керованого або неконтрольованого вхідного елемента протягом життя компонента. * Слідує мій код: constructor(props) { super(props); this.state = { fields: {}, errors: {} } this.onSubmit = this.onSubmit.bind(this); …

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 …

321 javascript  reactjs 

Я отримую таку помилку Uncaught TypeError: Неможливо прочитати властивість 'setState' невизначеного навіть після зв'язування дельти в конструкторі. class Counter extends React.Component { constructor(props) { super(props); this.state = { count : 1 }; this.delta.bind(this); } delta() { this.setState({ count : this.state.count++ }); } render() { return ( <div> <h1>{this.state.count}</h1> <button onClick={this.delta}>+</button> …

316 javascript  reactjs