reactjs- все статьи тега ➜ страница 4
Как добавить несколько классов в компонент ReactJS
Я новичок в ReactJS и JSX, и у меня возникли небольшие проблемы с кодом ниже. Я пытаюсь добавить несколько классов в в каждом 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({ focused: index }); }, render: function() { var self = this; var accountMenuData = [ ...
React-uncaught TypeError: не удается прочитать свойство 'setState' из undefined
Я получаю следующую ошибку Uncaught TypeError: не удается прочитать свойство 'setState' из undefined даже после привязки Дельта в конструкторе. 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> ...
Вложенные маршруты с маршрутизатором react V4
в настоящее время я борюсь с маршрутами вложенности с помощью react router v4. самым близким примером была конфигурация маршрута в React-Router V4 документация. Я хочу разделить мое приложение на 2 разных части. интерфейс и админка. Я думал о чем-то вроде этого: <Match pattern="/" component={Frontpage}> <Match pattern="/home" component={HomePage} /> <Match pattern="/about" component={AboutPage} /> </Match> <Match pattern="/admin" component={Backend}> < ...
Как обновить состояние родителя в React?
моя структура выглядит следующим образом: Component 1 - |- Component 2 - - |- Component 4 - - - |- Component 5 Component 3 компонент 3 должен отображать некоторые данные в зависимости от состояния компонента 5. Поскольку реквизит неизменен, я не могу просто сохранить его состояние в компоненте 1 и переслать его, верно? И да, я читал о redux, но не хочу его использовать. Я надеюсь, что это можно решить только с реагировать. Я ошибаюсь? ...
Reactjs конвертировать в html
У меня возникли проблемы с ReactJS facebook. Всякий раз, когда я делаю ajax и хочу отобразить данные html, ReactJS отображает его как текст. (См. рисунок ниже) данные отображаются через функцию обратного вызова успеха jQuery Ajax. $.ajax({ url: url here, dataType: "json", success: function(data) { this.setState({ action: data.action }) }.bind(this) }); есть ли простой способ преобразовать это в html? Как я должен сделать это с помощью ReactJS? ...
React + Redux-каков наилучший способ обработки CRUD в компоненте формы?
у меня есть одна форма, которая используется для создания, чтения, обновления и удаления. Я создал 3 компонента с той же формой, но я передаю им разные реквизиты. Я получил CreateForm.js, ViewForm.js (только для чтения с помощью кнопки Удалить) и UpdateForm.js. раньше я работал с PHP, поэтому я всегда делал это в одной форме. Я использую React и Redux для управления магазином. когда я нахожусь в компоненте CreateForm, я передаю своим подкомпонентам этот реквизит createForm={true} чтобы не ...
Как использовать переключатели в ReactJS?
Я новичок в ReactJS, извините, если это так звучит. У меня есть компонент, который создает несколько строк таблицы в соответствии с полученными данными. каждая ячейка в столбце есть checkbox радио. Следовательно, пользователь может выбрать один site_name и address из существующих строк. Выбор должен быть показан в нижнем колонтитуле. И вот где я застрял. var SearchResult = React.createClass({ render: function(){ var resultRows = this.props.data.map(function(result){ retur ...
ReactJS: Моделирование Двунаправленной Бесконечной Прокрутки
наше приложение использует бесконечную прокрутку для навигации по большим спискам гетерогенных элементов. Есть несколько морщин: обычно наши пользователи имеют список из 10 000 элементов и должны прокручивать 3k+. это богатые элементы, поэтому мы можем иметь только несколько сотен в DOM, прежде чем производительность браузера станет неприемлемой. элементы разной высоты. элементы могут содержать изображения и мы позволяем пользователю прыгать на конкретную дату. Это сложно, потому что пользоват ...
Получить данные формы в Reactjs
у меня есть простая форма в моем ...
чтобы вызвать событие onChange после нажатия клавиши Enter
Я новичок в Bootstrap и застрял с этой проблемой. У меня есть поле ввода, и как только я ввожу только одну цифру, вызывается функция из onChange, но я хочу, чтобы она вызывалась, когда я нажимаю "Enter", когда весь номер был введен. Та же проблема для функции проверки - она вызывает слишком рано. var inputProcent = React.CreateElement(bootstrap.Input, {type: "text", // bsStyle: this.validationInputFactor(), placeholder: this.initialFactor, className: "input-block-level", ...
"Синтаксис ошибка: непредвиденная лексема
в компоненте приложения React, который обрабатывает каналы контента, подобные Facebook, я сталкиваюсь с ошибкой: кормить.js: 94 неопределенный" parsererror "" SyntaxError: неожиданный токен я столкнулся с аналогичной ошибкой, которая оказалась опечаткой в HTML в функции рендеринга, но это, похоже, не так. более запутанно, я откатил код обратно к более ранней, известной рабочей версии, и я все еще получаю ошибку. кормить.js: import React from 'react'; var ThreadForm = React.createCl ...
Как включить / выключить режим разработки ReactJS?
начал использовать ReactJS функция проверки опоры, который, как говорят документы, работает только в "режиме разработки" по соображениям производительности. React, похоже, проверяет свойства конкретного компонента, который я аннотировал, но я не помню, чтобы явно включал "режим разработки". Я попытался найти способ запуска / переключения режима разработки, но не повезло. ...
Как разрешить webpack-dev-server разрешать точки входа из react-router
Я создаю приложение, которое использует webpack-dev-server в разработке вместе с react-router. кажется, что webpack-dev-server построен вокруг предположения, что у вас будет общедоступная точка входа в одном месте (т. е."/"), тогда как react-router позволяет использовать неограниченное количество точек входа. Я хочу воспользоваться преимуществами webpack-dev-сервера, особенно функцией горячей перезагрузки, которая отлично подходит для производительности, но я все еще хочу иметь возможность заг ...
Маршрутизация клиента (с помощью react-router) и маршрутизация на стороне сервера
Я думал, и я запутался с маршрутизацией между клиентом и сервером. Предположим, что я использую ReactJS для рендеринга на стороне сервера перед отправкой запроса обратно в веб-браузер и использую react-router в качестве маршрутизации на стороне клиента для переключения между страницами без обновления как SPA. что приходит на ум, это: как интерпретируются маршруты? Например, запрос с домашней страницы (/home) на страницу сообщений (/posts) причем тут маршрутизация перейти, на стороне сервера и ...
Встроенные стили CSS в React:как реализовать a: hover?
мне очень нравится встроенный шаблон CSS в React и решил использовать его. однако, вы не можете использовать :hover и подобные селекторы. Итак, каков наилучший способ реализации подсветки при наведении при использовании встроенных стилей CSS? одно предложение от reactjs # - это Clickable компонент и использовать его как это: <Clickable> <Link /> </Clickable> The Clickable есть hovered состояние и передает его в качестве реквизита для ссылки. Тем не менее,Clickable (пут ...
Имена компонентов ReactJS должны начинаться с заглавных букв?
Я играю с фреймворком ReactJS на JSBin. Я заметил, что если мое имя компонента начинается со строчной буквы, оно не работает. например, следующее не отображается: var fml = React.createClass({ render: function () { return <a href='google.com'>Go</a> } }); React.render(<fml />, document.body); но как только я заменить fml С Fml это рендер. есть причина, по которой я не могу начать теги с маленькой буквы? ...
React-Router: какова цель IndexRoute?
Я не понимаю, что цель использования IndexRoute и IndexLink. Кажется, что в любом случае приведенный ниже код сначала выбрал бы компонент Home, Если бы не был активирован путь About. <Route path="/" component={App}> <IndexRoute component={Home}/> <Route path="about" component={About}/> </Route> vs <Route path="/" component={App}> <Route path="home" component={Home}/> <Route path="about" component={About}/> </Route> в чем преимуществ ...
Как создать уникальные идентификаторы для меток форм в React?
у меня есть форма с элементами labels и я хочу иметь уникальные идентификаторы для ссылки label s к элементам с . Что-то вроде этого: React.createClass({ render() { const id = ???; return ( <label htmlFor={id}>My label</label> <input id={id} type="text"/> ); } }); я использовал для создания идентификаторов на основе this._rootNodeID но он недоступен с React 0.13. Каков лучший и / или самый простой способ сделать это сей ...
ReactJS SyntheticEvent stopPropagation () работает только с событиями React?
Я пытаюсь использовать событие.это происходит() в ReactJS компонент, чтобы остановить события click от бурлят и вызывая событие click, которое было прикреплено с помощью jQuery в legacy код, но кажется, что Реакт это происходит() только останавливает распространение на мероприятиях также содержится в реакции, и это происходит в jQuery() не останавливает распространение на мероприятия, связанные с реагировать. есть ли способ заставить stopPropagation () работать через эти события? Я написал про ...
Могу ли я сделать динамические стили в React Native?
скажем, у меня есть компонент с рендером, как это: <View style={jewelStyle}></View> где jewelStyle = { borderRadius: 10, backgroundColor: '#FFEFCC', width: 20, height: 20, }, как я могу сделать цвет фона динамически и случайным образом? Я пробовал { borderRadius: 10, backgroundColor: getRandomColor(), width: 20, height: 20, }, но это делает все экземпляры View имеют тот же цвет, я хочу, чтобы каждый из них был индивидуальным. какие- ...