reactjs- все статьи тега


Как взять массив, разделенный запятыми, и преобразовать его в отдельные элементы списка? Реагировать.в JS и JavaScript

Итак, у меня есть этот массив, который отображается на DOM следующим образом: jamaican rum,fresh lime juice,simple syrup,Angostura Aromatic Bitters Но я хочу показать его DOM следующим образом: ямайский ром свежий сок лайма простой сироп Ангостура Ароматическая Горькая Это то, что у меня есть до сих пор в моем детском компоненте. recipeIngredients - это список, который я хочу превратить в неупорядоченный список: render(){ const recipe = this.props.recipe; const recipeIn ...

Реагировать (сайт Preact) оказывает содержание в два раза

На редактируемом предварительном элементе я запускаю сценарий onKeyDown только при нажатии клавиши enter, чтобы избежать нежелательных HTML-элементов в тексте. render({}, {content}) { console.log("render: "+content); return <p contenteditable onKeyDown={this.handleKeyDown}>{content}</p> } В функции handleKeyDown Содержание абзацев изменяется и setState(content: newText) вызывается таким образом, что содержание должно быть воспроизведено снова. Это приводит к тому, ...

Как передать значение от родительского компонента к дочернему компоненту (react)

Я новичок в изучении React и пытаюсь передать значение, которое я получаю от пользовательского ввода внутри моего ParentComponent (через поле ввода) в его ChildComponent - которое я буду использовать для запуска вызова AJAX. Я думал, что путем замены состояния в ParentComponent будет работать-но я все еще не в состоянии схватить его в ChildComponent. Я также хочу, чтобы ChildComponent запускался/визуализировался только после получения входного значения от ParentComponent (чтобы я мог выполнит ...

Загрузка шрифтов с помощью Webpack и font-face

Я пытаюсь загрузить шрифт в мой CSS-файл с помощью @font-face, но шрифт никогда не загружается. Это моя структура каталогов. Затем в webpack.config.js у меня есть загрузчик, чтобы получить шрифты. var path = require('path'); var webpack = require('webpack'); module.exports = { devtool: 'eval', entry: [ "./index.js" ], output: { path: __dirname+"/build", filename: "main.js" }, plugins: [ new webpack.NoErrorsPlugin(), new webpack.HotModuleReplacementPlugin(), ...

структура каталога img react.JS

Как мне получить изображения для отображения? 40 минут переподготовки и все равно никакой радости. Я думаю, что настоящий ответ заключается в том, куда я помещаю изображения. Структура Главного реж. App.js public > index.js Views > index.jsx layouts > footer.jsx header.jsx master.jsx Куда бы я ни поместил изображения, они не будут отображаться. главный файл, который вызывается и отображает html, - это index.jsx внутри папки views. Я исп ...

React Redux-почему mapStateToProps вызывается раньше конструктора?

Два вопроса: Почему mapStateToProps вызывается перед конструктором? Как побочный эффект 1 constructor (props) { base(props) // props already have values from "mapStateToTprops" } Почему это делается автоматически? Не каждый mapStateToProps вызывает ComponentWillReceiveProps (это тот случай, когда он загружается в первый раз) смотрите эту ссылку Введите описание ссылки здесь Обновление 1 Если я хочу написать условие типа: if (props.isAuthenticated) { browserHisto ...

Вручную установите поле redux-form и / или ошибки формы

Я знаю, что если вы бросите SubmissionError из своей функции handleSubmit(), код redux-form заполнит ошибки соответствующих полей и/или самой формы. Тем не менее, этот API установки ошибок поля/формы, тесно связывает нашу реализацию handleSumbit(), чтобы быть вызывающим кодом redux-form (который содержит обработчик исключений SubmissionError). Мой вариант использования должен быть примерно таким: function asyncActionDispatcher(values) { return (dispatch ...

Как вызвать функцию в react js из внешнего файла JS

Я пытался создать pop over для одного из моих элементов, которые используют react и bootstrap. Ниже приведен мой код реакции: - class Share extends React.Component{ render(){ return( <div>hello</div> ); } } var shareRenderFunc=function() { ReactDOM.render( <Share/> , document.getElementById('shareContainer') ); } Ниже приведен мой jquery, называемый shareRenderFunc() :- var popOverSettings = { placement: 'bottom', container: ' ...

Как сделать синхронный запрос вызова API в react js

Я новичок в react js я работаю над небольшим приложением, которое часто делает запросы api. Таким образом, проблема, с которой я сталкиваюсь, заключается в том, что есть страница с полями формы, предварительно заполненными из БД, если пользователь вносит изменения в эти поля, я отправляю новые значения в БД. при нажатии кнопки submit вызывается saveandcontinue (), оттуда вызывается addNewAddress () на основе условия. Но проблема в том, что ответ, который я получаю от addNewAddress, должен исполь ...

React Router способен выполнять маршрутизацию только при запуске с корневого url-адреса

У меня есть приложение React, которое также использует Redux и ReactRouter. Моя проблема заключается в следующем: Когда я запускаю приложение и иду к корневому url, я обычно могу перемещаться внутри приложения, и маршруты в навигационной панели будут меняться по мере перемещения. Однако, если я наберу в навигационной панели любой url, отличный от корневого, я получу странную ошибку: Я действительно не понимаю, как можно получить такую ошибку. Если я пойду для localhost:1337/, а затем наж ...

Visual Studio Code автозаполнение при нажатии кнопки"." ключ. Любой способ отключить?

Когда я пытаюсь продлить реакцию.Компонент абстрактный базовый класс, я получаю предложения автозаполнения в поле ниже, как я набираю в React. Проблема в том, что они завершаются, даже когда я набираю "."ключ, а не tab или enter, как можно было бы ожидать. Есть ли способ отключить это поведение, чтобы я не получал автозаполнение с помощью клавиши dot. Я думаю, что обходной путь может заключаться в том, чтобы получить расширение,которое заставит больше реагировать на всплывающие предложения / ...

React: несколько строк таблицы в массиве.карта во время рендеринга

У меня есть эта проблема. Я хочу замкнуть массив и отобразить значения в виде таблицы, где каждый элемент является строкой в таблице. Пока никаких проблем. Но в зависимости от значения в каждом элементе я хочу показать дополнительную строку с большим количеством значений для каждого элемента массива. У меня есть такой код: <tbody> {myList.map((item, i) => { return ( <div> <tr key={i} onClick={toggleMobileOpen.bind(this, i)}> <td className=" ...

Шутку ссылка не найдена при запуске теста на JS, используя хуцпу

Я хочу интегрировать мои jest unit tests в TFS CI, чтобы во время сборки он показывал результаты jest unit Test в выводе сборки TFS. Я использовал расширение Chutzpah. Ниже приведены ссылки на него : https://visualstudiogallery.msdn.microsoft.com/f8741f04-bae4-4900-81c7-7c9bfb9ed1fe https://blogs.msdn.microsoft.com/visualstudioalm/2012/03/01/visual-studio-11-beta-unit-testing-plugins-list/ Я последовал за ним. https://blogs.msdn.microsoft.com/matt-harrington/2014/10/27/javascript-unit-testin ...

react / redux action creator возвращает неопределенное значение, когда больше одной полезной нагрузки

Эй, я уже несколько дней пытаюсь это выяснить. Я хочу иметь в редукторе две части информации, идентификатор и json, который получает, однако то, что я пытался до сих пор, кажется, не работает, любая помощь в этом была бы очень признательна. Это корневой индекс.js файл, который использует redux-multi: import React from 'react'; import ReactDOM from 'react-dom'; import { Provider } from 'react-redux'; import { createStore, applyMiddleware } from 'redux'; import { BrowserRouter, Route, Switch } ...

Redux не обновляет компоненты при обновлении свойств глубокого неизменяемого состояния

Мой вопрос: почему обновление свойства объекта в массиве в моем неизменяемом состоянии (Map) не вызывает Redux для обновления моего компонента? Я пытаюсь создать виджет, который загружает файлы на мой сервер, и мое начальное состояние (из моего UploaderReducer, который вы увидите ниже) объекта выглядит следующим образом: let initState = Map({ files: List(), displayMode: 'grid', currentRequests: List() }); У меня есть метод thunk, который запускает загрузку и отправляет действия, когда ...

Передача данных родителя реагировать

Я новичок, чтобы реагировать и, следовательно, вопрос. У меня есть родительский компонент-Домашняя страница с дочерним компонентом-боковой панелью. Боковая панель моего дочернего компонента должна передать данные обратно родителю при нажатии кнопки submit, которую родитель должен опубликовать в api. Это мой родительский компонент, class HomePage extends React.Component{ constructor(props) { ....... this.handleSubmit = this.handleSubmit.bind(this); } handleSubmit(){ //Logic t ...

React Native-DEV не определен

У меня есть [email protected] проект. Я удалил папку node_modules и после того, как я дал следующие команды: npm i react-native upgrade Но я получаю эту ошибку: react-native.js:15 ReferenceError: __DEV__ is not defined Как это исправить? ...

Перебор JSON в React

У меня есть следующий код: export class Highlights extends React.Component { render() { return ( <div> {JSON.stringify(this.props.highlights_data.data)} </div> ) } } Это выводит следующее: {"active":{"label":"Active","value":"12"},"automatic":{"label":"Automatic","value":"8"},"waiting":{"label":"Waiting","value":"1"},"manual":{"label":"Manual","value":"3"}} Как я могу перебирать реквизиты highlights_data.data, ...

Компиляция react с синтаксической ошибкой webpack

Я немного новичок в webpack с загрузчиком babel и eslint и я пытаюсь скомпилировать очень простое приложение и я получаю эту странную синтаксическую ошибку, которую я не могу понять Это мой индекс.js, где я получаю ошибку компиляции const store = configureStore() render( <Router> <Root store={ store } /> </Router>, document.getElementById('console_root') ) И это ошибка, которую я получаю: ERROR in ./src/index.js Module build failed: SyntaxError: Unexpected to ...

Каковы недостатки использования одного большого компонента React?

Каковы недостатки использования одного большого компонента React? У меня есть глубокий опыт использования webpack, browserify, AngularJS, ES6, NPM и других подобных веб-фреймворков. Я новичок, чтобы реагировать. Я хочу создать одностраничное приложение в React. Я не хочу и не нуждаюсь в тестировании. Мне не нужны друзья по команде, чтобы работать. Мне нужно только сделать разработку продукта как можно быстрее. Сделай так, чтобы все работало. Вы можете назвать его MVP. Вы можете назвать его тип ...