Вопросы с тегом «reactjs»

Я работаю с Javascript (ES6) / реакцией FaceBook и пытаюсь получить первые 3 элемента массива, который различается по размеру. Я хотел бы сделать эквивалент Linq take (n). В моем файле Jsx у меня есть следующее: var items = list.map(i => { return ( <myview item={i} key={i.id} /> ); }); Затем, …

388 javascript  reactjs 

Я видел выступление разработчика React ( Пит Хант: React: переосмысление лучших практик - JSConf EU 2013 ), и докладчик отметил, что проверка модели может быть медленной. Но не является ли вычисление различий между виртуальными DOM на самом деле еще менее производительным, поскольку виртуальная DOM в большинстве случаев должна быть больше, …

372 javascript  dom  reactjs  virtual-dom 

У меня есть приложение, в котором мне нужно динамически установить высоту элемента (скажем, «app-content»). Он берет высоту "хрома" приложения и вычитает его, а затем устанавливает высоту "контента приложения", чтобы он соответствовал 100% в рамках этих ограничений. Это очень просто с ванильными представлениями JS, jQuery или Backbone, но я изо всех …

367 javascript  reactjs 

В текущей версии React Router (v3) я могу принять ответ сервера и использовать browserHistory.pushдля перехода на соответствующую страницу ответа. Тем не менее, это не доступно в v4, и я не уверен, как правильно это сделать. В этом примере при использовании Redux компоненты / app-product-form.js вызывают, this.props.addProduct(props)когда пользователь отправляет форму. Когда …

361 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) { …

360 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({ …

349 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>элемент я получаю следующую ошибку: Uncaught …

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 …

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

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

332 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 />, теперь , очевидно , когда я изменить …

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 …

316 javascript  reactjs