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

Я новичок в React Router и узнал, что существует так много способов перенаправить страницу: С помощью browserHistory.push("/path") import { browserHistory } from 'react-router'; //do something... browserHistory.push("/path"); С помощью this.context.router.push("/path") class Foo extends React.Component { constructor(props, context) { super(props, context); //do something... } redirect() { this.context.router.push("/path") } } Foo.contextTypes = { …

107 reactjs  redux  react-router 

Каждый раз, когда я пытаюсь использовать значок Font Awesome в React render(), он не отображается на результирующей веб-странице, хотя работает в обычном HTML. render: function() { return <div><i class="fa fa-spinner fa-spin">no spinner but why</i></div>; } Вот живой пример: http://jsfiddle.net/pLWS3/ В чем вина?

106 reactjs  font-awesome 

У меня есть один редуктор для клиентов, другой для AppToolbar и некоторые другие ... Теперь допустим, что я создал действие выборки для удаления клиента, и если это не удается, у меня есть код в редукторе клиентов, который должен кое-что делать, но также я хочу отобразить некоторую глобальную ошибку в AppToolbar. …

105 javascript  reactjs  redux 

Я запускаю lint с моим приложением React и получаю эту ошибку: error JSX props should not use arrow functions react/jsx-no-bind И здесь я запускаю стрелочную функцию (внутри onClick): {this.state.photos.map(tile => ( <span key={tile.img}> <Checkbox defaultChecked={tile.checked} onCheck={() => this.selectPicture(tile)} style={{position: 'absolute', zIndex: 99, padding: 5, backgroundColor: 'rgba(255, 255, 255, 0.72)'}} /> …

105 javascript  reactjs  ecmascript-6  jsx  arrow-functions 

Я установил eslint-config-airbnb, который должен предварительно настроить ESLINT для React: Наш экспорт по умолчанию содержит все наши правила ESLint, включая ECMAScript 6+ и React. Для этого требуются eslint, eslint-plugin-import, eslint-plugin-react и eslint-plugin-jsx-a11y. Мое .eslintrcрасширение его конфигурации: { "extends": "eslint-config-airbnb", "env": { "browser": true, "node": true, "mocha": true }, "rules": { …

105 javascript  reactjs  eslint  eslint-config-airbnb 

Я играл с новой системой хуков в React 16.7-alpha и застревал в бесконечном цикле в useEffect, когда состояние, которое я обрабатываю, является объектом или массивом. Сначала я использую useState и инициирую его с помощью пустого объекта, например этого: const [obj, setObj] = useState({}); Затем в useEffect я использую setObj, чтобы …

105 reactjs  react-hooks 

Я создал сайт с React.js и webpack . Я хочу использовать шрифты Google на веб-странице, поэтому помещаю ссылку в раздел. Google шрифты <link href="https://fonts.googleapis.com/css?family=Bungee+Inline" rel="stylesheet"> И установите CSS body{ font-family: 'Bungee Inline', cursive; } Однако это не работает. Как я могу решить эту проблему?

105 reactjs  webpack  google-font-api 

Допустим, у меня есть компонент представления с условной визуализацией: render(){ if (this.state.employed) { return ( <div> <MyInput ref="job-title" name="job-title" /> </div> ); } else { return ( <div> <MyInput ref="unemployment-reason" name="unemployment-reason" /> <MyInput ref="unemployment-duration" name="unemployment-duration" /> </div> ); } } MyInput выглядит примерно так: class MyInput extends React.Component { ... …

104 javascript  reactjs 

В чем разница между загрузчиками и плагинами в webpack? В документации для плагинов просто сказано: Используйте плагины для добавления функций, обычно связанных с пакетами в webpack. Я знаю, что babel использует загрузчик для преобразований jsx / es2015, но похоже, что другие общие задачи (например, copy-webpack-plugin) вместо этого используют плагины.

104 javascript  reactjs  webpack 

Я понимаю, что это основной вопрос, но мне не удалось найти ответ в другом месте. Является ли store.dispatchсинхронный или асинхронный в Redux? Если это асинхронно, есть ли возможность добавить обратный вызов после того, как действие было распространено, как это возможно с помощью React?

104 javascript  reactjs  redux  single-page-application 

Я новичок в response.js. Я реализовал один компонент, в котором я извлекаю данные с сервера и использую их как CallEnterprise:function(TenantId){ fetchData('http://xxx.xxx.xx.xx:8090/Enterprises?TenantId='+TenantId+' &format=json').then(function(enterprises) { EnterprisePerspectiveActions.getEnterprise(enterprises); }).catch(function() { alert("There was some issue in API Call please contact Admin"); //ComponentAppDispatcher.handleViewAction({ // actionType: MetaItemConstants.RECEIVE_ERROR, // error: 'There was a problem getting the enterprises' //}); …

104 javascript  reactjs  configuration  webpack  flux 

Итак, вот мой текущий рабочий процесс для импорта изображений и значков в веб-пакет через ES6: import cat from './images/cat1.jpg' import cat2 from './images/cat2.svg' import doggy from './images/doggy.png' import turtle from './images/turtle.png' <img src={doggy} /> Это быстро становится грязным. Вот что я хочу: import * from './images' <img src={doggy} /> <img …

104 reactjs  webpack  ecmascript-6 

Я использую Axios при программировании в ReactJS и делаю вид, что отправляю запрос DELETE на свой сервер. Для этого мне нужны заголовки: headers: { 'Authorization': ... } и тело состоит из var payload = { "username": .. } Я искал в интервалах и только обнаружил, что метод DELETE требует «param» …

104 javascript  reactjs  http  axios  http-delete 

У меня есть компонент, который я создал: class Create extends Component { constructor(props) { super(props); } render() { var playlistDOM = this.renderPlaylists(this.props.playlists); return ( <div> {playlistDOM} </div> ) } activatePlaylist(playlistId) { debugger; } renderPlaylists(playlists) { return playlists.map(playlist => { return <div key={playlist.playlist_id} onClick={this.activatePlaylist(playlist.playlist_id)}>{playlist.playlist_name}</div> }); } } function mapStateToProps(state) { return …

104 javascript  reactjs  redux 

Есть ли способ предотвратить /#/отображение в адресной строке браузера при использовании response-router? Это с ReactJS. т.е. щелчок по ссылкам для перехода к новому маршруту показывает localhost:3000/#/или localhost:3000/#/about. В зависимости от маршрута.

103 reactjs  react-router