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

Я побачив, що React 16 дозволяє передавати атрибути до DOM. Отже, це означає, що 'class' можна використовувати замість className, так? Мені просто цікаво, чи є переваги у використанні className перед класом, крім того, що він сумісний із попередніми версіями React.

84 reactjs 

Я використовую Reactі ESLintз eslint-plugin-react. Я хочу , щоб disableв prop-typesправила в одному файлі. var React = require('react'); var Model = require('./ComponentModel'); var Component = React.createClass({ /* eslint-disable react/prop-types */ propTypes: Model.propTypes, /* eslint-enable react/prop-types */ render: function () { return ( <div className="component"> {this.props.title} </div> ); } });

84 reactjs  eslint 

Намагаючись зрозуміти, як я можу повернутися на попередню сторінку. я використовую[react-router-v4][1] Це код, який я налаштував на своїй першій цільовій сторінці: <Router> <div> <Link to="/"><div className="routerStyle"><Glyphicon glyph="home" /></div></Link> <Route exact path="/" component={Page1}/> <Route path="/Page2" component={Page2}/> <Route path="/Page3" component={Page3}/> </div> </Router> Для пересилання на наступні сторінки я просто роблю: this.props.history.push('/Page2'); Однак …

84 javascript  reactjs  react-router-v4 

У мене є цей компонент: import React from 'react'; export default class AddItem extends React.Component { add() { this.props.onButtonClick(this.input.value); this.input.value = ''; } render() { return ( <div className="add-item"> <input type="text" className="add-item__input" ref={(input) => this.input = input} placeholder={this.props.placeholder} /> <button disabled={!this.input.value} className="add-item__button" onClick={this.add.bind(this)}>Add</button> </div> ); } } Я хочу, щоб …

84 javascript  reactjs 

Спроба з’ясувати оптимальний спосіб створення обробників подій у компонентах без реагування React. Я міг зробити щось подібне: const myComponent = (props) => { const myHandler = (e) => props.dispatch(something()); return ( <button onClick={myHandler}>Click Me</button> ); } Тут недоліком є ​​те, що кожного разу, коли цей компонент відображається, створюється нова функція …

84 javascript  reactjs 

Я використовую компонент Link з маршрутизатора responsejs, і я не можу змусити onClickevent працювати. Це код: <Link to={this.props.myroute} onClick='hello()'>Here</Link> Це спосіб зробити це чи інший спосіб?

84 reactjs  react-router  react-redux 

Я новачок у ReactJS. Раніше я використовував jQuery для встановлення будь-якої анімації або функції, яка мені потрібна. Але зараз я намагаюся використовувати ReactJS і звести до мінімуму використання jQuery. Моя справа: Я намагаюся побудувати акордеон з ReactJS. <div class="accor"> <div class="head">Head 1</div> <div class="body hide">Body 1</div> </div> <div class="accor"> <div …

84 javascript  jquery  reactjs 

Імітація клацання кнопки здається дуже простою / стандартною операцією. Проте я не можу змусити його працювати в тестах Jest.js. Це те, що я спробував (і також робив це за допомогою jQuery), але, здається, це нічого не викликало: import { mount } from 'enzyme'; page = <MyCoolPage />; pageMounted = mount(page); …

84 javascript  reactjs  testing  jestjs  enzyme 

Невідпрацьоване відхилення (помилка): дії повинні бути звичайними об’єктами. Використовуйте власне проміжне програмне забезпечення для асинхронних дій. Я хотів додавати коментарі до кожного повідомлення. Отже, коли запускаються публікації отримання, я хочу зателефонувати API отримання коментарів для всіх повідомлень. export function bindComments(postId) { return API.fetchComments(postId).then(comments => { return { type: BIND_COMMENTS, comments, …

84 reactjs  react-redux 

У мене є маршрутизатор, як показано нижче: <Router history={hashHistory}> <Route path="/" component={App}> <IndexRoute component={Index}/> <Route path="login" component={Login}/> </Route> </Router> Ось чого я хочу досягти: Перенаправити користувача, /loginякщо він не ввійшов у систему Якщо користувач намагався отримати доступ, /loginколи він уже ввійшов у систему, перенаправіть його на root/ так що тепер …

83 javascript  reactjs  react-router 

Я просто роблю просту програму, щоб навчитися асинхронізації за допомогою redux. У мене все працює, тепер я просто хочу відобразити фактичний стан на веб-сторінці. Тепер, як я дійсно можу отримати доступ до стану магазину в методі візуалізації? Ось мій код (все на одній сторінці, бо я тільки вчуся): const initialState …

83 javascript  asynchronous  reactjs  redux  react-redux 

Використання Facebook React. На сторінці налаштувань у мене є багаторядковий рядок, textareaкуди користувач може вводити багаторядковий текст (у моєму випадку - адресу). <textarea value={address} /> Коли я намагаюся відобразити адресу, так щось на кшталт {address}, вона не відображає розривів рядків і знаходиться в одному рядку. <p>{address}</p> Будь-які ідеї, як це …

83 javascript  reactjs  textarea 

Хтось знає, як обмежити доступ до певних маршрутів у реакційному маршрутизаторі? Я хочу перевірити, чи ввійшов користувач в систему, перш ніж дозволити доступ до певного маршруту. Я думав, що це буде просто, але в документації незрозуміло, як це зробити. Це щось я повинен встановити там, де я визначаю свої <Route>компоненти, …

83 javascript  reactjs  react-router 

Як змусити реагувати? <input id={field.name} className="form-control" type="text" placeholder={field.name} autocomplete="off" {...field}/>

83 html  reactjs  google-chrome 

Я використовую webpack для побудови моїх компонентів реакції, і намагаюся використати, extract-text-webpack-pluginщоб відокремити мій css від згенерованого js-файлу. Однак, коли я намагаюся побудувати компонент я отримую наступне повідомлення про помилку: Module build failed: ReferenceError: window is not defined. Мій файл webpack.config.js виглядає так: var webpack = require('webpack'); var ExtractTextPlugin = …

83 reactjs  webpack