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

Скажімо, у мене є простий перемикач: Коли я натискаю кнопку, компонент Колір змінюється між червоним та синім Я міг би досягти цього результату, роблячи щось подібне. index.js Button: onClick={()=>{dispatch(changeColor())}} Color: this.props.color ? blue : red container.js connect(mapStateToProps)(indexPage) action_creator.js function changeColor(){ return {type: 'CHANGE_COLOR'} } reducer.js switch(){ case 'CHANGE_COLOR': return {color: …

89 javascript  reactjs  redux 

Я переписую свій додаток, щоб використовувати Flux, і у мене виникла проблема з отриманням даних із магазинів. У мене багато компонентів, і вони багато гніздяться. Деякі з них великі ( Article), інші маленькі та прості ( UserAvatar,UserLink ). Я боровся з тим, де в ієрархії компонентів мені слід читати дані …

89 javascript  reactjs  reactjs-flux 

Я шукаю шляхи реалізації нескінченної прокрутки за допомогою React. Я зіткнувся з response-infinite-scroll і виявив його неефективним, оскільки він просто додає вузли до DOM і не видаляє їх. Чи існує якесь перевірене рішення з React, яке додасть, видалить та підтримує постійну кількість вузлів у DOM. Ось проблема jsfiddle . У …

89 javascript  html  infinite-scroll  reactjs 

Я намагаюся змусити ReactJS працювати з рейками, використовуючи цей підручник. Я отримую цю помилку: Uncaught ReferenceError: React is not defined Але я можу отримати доступ до об'єкта React у консолі браузера, я також додав public / dist / turbo-response.min.js, як описано тут, а також додав рядок у application.js, як описано …

89 javascript  ruby-on-rails  reactjs 

Введення тексту вирівняно по центру, як виправити це введення тексту так, щоб воно вводило текст з верхнього лівого кута Ось мій css для введення тексту /* The Text input is center aligned, how to fix this text input so that it takes input from top left corner */ input: { …

89 javascript  ios  reactjs  react-native 

Я мігрую проект React з проектом TypeScript, щоб використовувати функції хуків (React v16.7.0-alpha), але я не можу зрозуміти, як встановити типізацію деструктурованих елементів. Ось приклад: interface IUser { name: string; } ... const [user, setUser] = useState({name: 'Jon'}); Я хочу змусити userзмінну мати тип IUser. Єдиним моїм успішним випробуванням є …

89 reactjs  typescript  react-hooks 

Ось цифри хв + gzip 26k gzip 90k оригінал 450 + k І React не має багато можливостей у своїй документації. Чому він такий великий? У мене відчуття, що це реалізація полегшеного DOM. Але я хочу бути впевненим.

88 reactjs 

У мене є деякий реквізит, який містить рядок, який міг би містити такі символи, як &. Він також містить пробіли. Я хочу замінити всі пробіли на  . Чи є простий спосіб зробити це? Майте на увазі, що я не можу просто візуалізувати, використовуючи цей синтаксис: <div dangerouslySetInnerHTML={{__html: myValue}} /> тому …

88 html  reactjs 

Я реалізую приклад з https://github.com/moroshko/react-autosuggest Важливий код такий: import React, { Component } from 'react'; import suburbs from 'json!../suburbs.json'; function getSuggestions(input, callback) { const suggestions = suburbs .filter(suburbObj => suburbMatchRegex.test(suburbObj.suburb)) .sort((suburbObj1, suburbObj2) => suburbObj1.suburb.toLowerCase().indexOf(lowercasedInput) - suburbObj2.suburb.toLowerCase().indexOf(lowercasedInput) ) .slice(0, 7) .map(suburbObj => suburbObj.suburb); // 'suggestions' will be an array of strings, …

87 javascript  json  reactjs  webpack 

У мене є модульні тести для мого reducers. Однак, коли я налагоджую в браузері, я хочу перевірити, чи правильно були викликані мої дії та чи відповідно змінено стан. Я шукаю щось на зразок: window._redux.store ... у браузері, щоб я міг набрати це на консолі і перевірити, як ідуть справи. Як …

87 javascript  reactjs  redux 

Я тестував свою програму React.js на Internet Explorer і виявив, що деякі коди ES6 / 7, як би, Array.prototype.includes()її ламають . Я використовую додаток create-response- і, мабуть, вони вирішили не включати багато поліфілів, оскільки вони потрібні не всім, і вони сповільнюють час збірки (див., Наприклад, тут і тут ). Документація …

87 javascript  reactjs  ecmascript-6  create-react-app  ecmascript-7 

У мене є reactjsпрограма, написана за стандартами ES6, і я використовую її webpackдля її створення. У webpackзавантажує jsмодулі , що використовують babel-loader. Якщо конкретно, я використовую такі версії пакетів: ├── babel@5.8.34 ├── babel-core@5.8.34 ├── babel-loader@5.4.0 └── webpack@1.12.6 Однак після його побудови IE 10 видає таку помилку 'Symbol' is undefined. Чи …

87 reactjs  webpack  babeljs 

У звичайному старому javascript у мене є DIV <div class="movie" id="my_movie"> та наступний код JavaScript var myMovie = document.getElementById('my_movie'); myMovie.addEventListener('nv-enter', function (event) { console.log('change scope'); }); Тепер у мене є React Component, всередині цього компонента, у методі render, я повертаю свій div. Як я можу додати прослуховувач події для своєї …

87 reactjs 

У мене є файл каруселі, в якому я хочу отримати index.jsта побудувати block.build.js, тому моє webpack.config.js: var config = { entry: './index.js', output: { path: __dirname, filename: 'block.build.js', }, devServer: { contentBase: './Carousel' }, module : { rules : [ { test: /.js$/, loader: 'babel-loader', exclude: /node_modules/, query: { presets: …

87 reactjs  webpack  babeljs 

Під час розробки за допомогою програми create-response-app мій браузер переходить у режим налагодження із попередженнями: Він порушує вихідний код React-Dev-Tools: // --- Welcome to debugging with React DevTools --- // This debugger statement means that you've enabled the "break on warnings" feature. // Use the browser's Call Stack panel to …

87 reactjs  javascript-debugger