reactjs- все статьи тега ➜ страница 3
Как реализовать локализацию в reactjs?
Нам нужно реализовать локализацию в reactjs, чтобы определить строку значение (ы). Как я могу это реализовать? Одно звено есть https://www.npmjs.com/package/react-localization , но я не получаю шагов, чтобы добавить это. Я попытался сделать следующие шаги: - Я добавляю свой компонент в ES6:-- Класс Home расширяет React.Деталь { конструктор (реквизит) { супер (реквизит); } render() { return ( <Text>{strings.how} </Text> ); } } Я добавил ...
Создать дерево каталогов в React
Я работаю над музыкальным плеером с использованием electron и решил попробовать react, но я застрял на создании дерева каталогов. Я использую readdirp для рекурсивного получения всех каталогов, но я понятия не имею, как построить дерево; readdirp создает массив объектов со следующими свойствами: // dir.fullPath : 'D:/Music/Artist/Album/name', // dir.fullParentDir : 'D:/Music/Artist/Album', // dir.path : 'Artist/Album/name', // dir.parentDir : 'Artist/Album', // dir.name ...
Добавление React в проект Django
Я разработчик Django, только начинаю добавлять React на одну страницу моего приложения,и мне это очень нравится. (Это обычное приложение Django с домашней страницей, страницей о программе и т. д., но также и страница "диаграмма" с интерактивным графиком, и я хочу построить интерактивную часть в React.) Проблема в том, что я начал с загружаемого React starter kit , и я не уверен, как сделать все "правильно", и это сложно, используя Django для обслуживания моего проект (все учебники, похоже, пре ...
Энзимный базовый тест с использованием мелких ошибок с "Target is not a DOM element"
Я пробую невероятно простой тест, используя shallow. У меня было впечатление, что shallow требует нулевых зависимостей вне самого компонента, но я попал в эту ошибку: FAIL src/test/app/AppHeader/buttons/LogoButton.test.tsx ● Test suite failed to run Invariant Violation: Target container is not a DOM element. 16 | }) 17 | } > 18 | 19 | ReactDOM.render( 20 | <Provider store={store}> 21 | <Router history={history}> at inva ...
Как получить доступ к элементу DOM в React? Что такое равнозначность документа.getElementById () в React
Как я выбираю определенные бары в react.js? Вот мой код: var Progressbar = React.createClass({ getInitialState: function () { return { completed: this.props.completed }; }, addPrecent: function (value) { this.props.completed += value; this.setState({ completed: this.props.completed }); }, render: function () { var completed = this.props.completed; if (completed < 0) { completed = 0 }; return (...); } Я хочу испол ...
Создание таблицы с удаленной сортировкой, разбиением на страницы, фильтрацией
Я действительно Новичок в react / redux. Я прочитал и изучил всю документацию и примеры, теперь я пытаюсь создать таблицу (не фиксированную-data-table), чтобы данные, собранные с сервера, позволяли мне выполнять подкачку, сортировку и фильтрацию контента. К сожалению, я понятия не имею, как действовать дальше, и не могу найти примеров, полезных для понимания того, как это сделать. Есть кто-то, кто мог бы дать мне несколько примеров для того, чтобы построить эти компоненты и что они могут ...
Как загрузить изображения, используемые в таблице стилей sass в webpack?
Я использую Webpack для связывания моих модулей и использую sass для стилизации в приложении на основе react. Используя отдельную таблицу стилей, я устанавливаю фоновое изображение компонента и загружаю эту таблицу стилей в index.js. Все стили в таблице стилей применяются к этому компоненту , кроме фонового изображения. Вот мой образец таблицы стилей $bg-img: url('/img/bg.jpg'); .show { position: relative; background: $black $bg-img center center; width: 100%; height: 100% ...
Программно перемещаться, используя реагировать маршрутизатор
С react-router можно использовать Link элемент для создания ссылок, которые изначально обрабатываются маршрутизатором react. Я вижу внутренне он вызывает this.context.transitionTo(...). Я хочу сделать навигацию, но не по ссылке, например, из выпадающего списка. Как я могу сделать это в коде? Что такое this.context? Я видел Navigation mixin, но могу ли я сделать это без миксинов? ...
Что делают эти три точки в React?
Что значит ... сделать в этом React (используя JSX) код и как он называется? <Modal {...this.props} title='Modal heading' animation={false}> ...
В чем разница между использованием конструктора и getInitialState в React / React Native?
Я видел, как оба используются взаимозаменяемо. каковы основные варианты использования для обоих? Есть ли преимущества / недостатки? Является ли это лучшей практикой? ...
Зачем нам нужно промежуточное программное обеспечение для асинхронного потока в Redux?
согласно документам, "без промежуточного по Redux store поддерживает только синхронный поток данных". Я не понимаю, почему это так. Почему компонент контейнера не может вызвать асинхронный API, а затем dispatch действия? например, представьте себе простой интерфейс: поле и кнопка. Когда пользователь нажимает кнопку, поле заполняется данными с удаленного сервера. import * as React from 'react'; import * as Redux from 'redux'; import { Provider, connect } from 'react-redux'; const ActionTyp ...
Установка фокуса на ввод после рендеринга
каков способ react установки фокуса на определенном текстовом поле после визуализации компонента? документация, кажется, предлагает использовать ссылки, например: Set ref="nameInput" в моем поле ввода в функции рендеринга, а затем вызовите: this.refs.nameInput.getInputDOMNode().focus(); но где я должен это назвать? Я пробовал несколько мест, но я не могу заставить его работать. ...
React JS onClick не может передать значение методу
Я хочу прочитать свойства значения события onClick. Но когда я нажимаю на него, я вижу что-то вроде этого в консоли: SyntheticMouseEvent {dispatchConfig: Object, dispatchMarker: ".1.1.0.2.0.0:1", nativeEvent: MouseEvent, type: "click", target мой код работает правильно. Когда я бегу, я вижу {column} но не может получить его в событии onClick. Мой Код: var HeaderRows = React.createClass({ handleSort: function(value) { console.log(value); }, render: function () { ...
Понимание уникальных ключей для детей массива в React.js
Я создаю компонент React, который принимает источник данных JSON и создает сортируемую таблицу. Каждая из динамических строк данных имеет уникальный ключ, назначенный ему, но я все еще получаю ошибку: каждый ребенок в массиве должен иметь уникальный" ключ " опоры. Проверьте метод рендеринга TableComponent. мой TableComponent рендер метод возвращает: <table> <thead key="thead"> <TableHeader columns={columnNames}/> </thead> <tbody key="tbody"> ...
React JSX: выбор "selected" на выбранном параметре
в компоненте React для <select> меню, мне нужно установить selected атрибут на опции, которая отражает состояние приложения. на render() на optionState передается от государственного владельца к компоненту SortMenu. Значения параметров передаются в виде props от JSON. render: function() { var options = [], optionState = this.props.optionState; this.props.options.forEach(function(option) { var selected = (optionState === option.value) ? ' selected' : ''; options.push( ...
Корректная модификация массивов состояний в ReactJS
Я хочу добавить элемент в конец state массив, это правильный способ сделать это? this.state.arrayvar.push(newelement); this.setState({arrayvar:this.state.arrayvar}); Я обеспокоен тем, что изменения массива на месте с push может вызвать проблемы - это безопасно? альтернатива создания копии массива, и setStateing это кажется расточительным. ...
Скрыть клавиатуру в react-native
Если я нажму на textinput, я хочу иметь возможность нажать где-нибудь еще, чтобы снова закрыть клавиатуру (но не клавишу возврата). Я не нашел ни малейшей информации об этом во всех учебниках и блогах, которые я читал. этот базовый пример все еще не работает для меня с react-native 0.4.2 в симуляторе. Не мог попробовать его на моем iPhone еще. <View style={styles.container}> <Text style={styles.welcome}> Welcome to React Native! </Text> <Text style={sty ...
Передать реквизит для родительского компонента в реакции.js
есть ли не простой способ передать ребенка props к своему родителю, используя события, в React.Джей? var Child = React.createClass({ render: function() { <a onClick={this.props.onClick}>Click me</a> } }); var Parent = React.createClass({ onClick: function(event) { // event.component.props ?why is this not available? }, render: function() { <Child onClick={this.onClick} /> } }); Я знаю, что вы можете использовать управляемые компоненты для передачи зн ...
Что такое ' @ ' (символ at)в декораторе Redux @connect?
Я изучаю Redux с React и наткнулся на этот код. Я не уверен, что это возвращение конкретное или нет, но я видел следующий фрагмент кода в одном из примеров. @connect((state) => { return { key: state.a.b }; }) в то время как функциональность connect довольно просто, но я не понимаю @ до connect. Это даже не оператор JavaScript, если я не ошибаюсь. может кто-нибудь объяснить, пожалуйста, что это и почему это использовали? обновление: Это на самом деле часть react-redux который ис ...
Как получить значение параметра из строки запроса
как я могу определить маршрут в моих маршрутах.jsx файл для захвата __firebase_request_key значение параметра из URL-адреса, созданного процессом единого входа Twitter после перенаправления с их серверов? http://localhost:8000/#/signin?_k=v9ifuf&__firebase_request_key=blablabla Я пробовал со следующей конфигурацией маршрутов, но :redirectParam - это не заразно указанных параметров: <Router> <Route path="/" component={Main}> <Route path="signin" component={SignIn}> ...