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

Мені доводиться впроваджувати певну бізнес-логіку залежно від історії перегляду. Я хочу зробити щось подібне: reactRouter.onUrlChange(url => { this.history.push(url); }); Чи є спосіб отримати зворотний дзвінок від реакційного маршрутизатора, коли URL-адреса оновлюється?

87 reactjs  react-router  react-router-v4  react-router-redux  react-router-dom 

У мене проблеми зі зміною подання у відповідь на маршрутизацію. Я хочу лише показати список користувачів, і натискання кожного користувача має перейти на сторінку деталей. Ось маршрутизатор: import React from "react"; import ReactDOM from "react-dom"; import { BrowserRouter } from 'react-router-dom'; import Users from "./components/Users"; import { Router, Route } …

87 reactjs  react-router 

У мене є наступний код, eslint throw: реагувати / проп-типи onClickOut; відсутній у валідації реквізиту реагувати / підтримувати дітей; відсутній у валідації реквізиту propTypes була визначена, але еслінт її не визнає. import React, { Component, PropTypes } from 'react'; class IxClickOut extends Component { static propTypes = { children: PropTypes.any, …

87 javascript  reactjs  eslint  flowtype 

Який найкращий спосіб обробляти зависання у стилізованих компонентах. У мене є обгортковий елемент, який при наведенні покаже кнопку. Я міг реалізувати деякий стан на компоненті і перемикати властивість при наведенні, але цікавився, чи є кращий спосіб зробити це за допомогою styled-cmponents. Щось на зразок наступного не працює, але було б …

87 reactjs  styled-components 

Припустимо, у мене є текстовий рядок, який містить розриви рядків, і я відображаю його так: render() { var text = "One\nTwo\nThree"; return <div>{text}</div>; } У HTML розриви рядків не відображаються як розриви рядків. Як мені це зробити в React? Я не хочу перетворювати на <br>теги та використовувати dangerouslySetInnerHTML. Чи є …

87 reactjs 

У мене є складна веб-сторінка, що використовує компоненти React, і я намагаюся перетворити сторінку зі статичного макета на більш чуйний, макет із можливістю зміни. Однак я постійно стикаюся з обмеженнями з React, і мені цікаво, чи існує стандартний шаблон для вирішення цих проблем. У моєму конкретному випадку у мене є …

86 javascript  reactjs  responsive 

Напевно, мені не вистачає чогось дуже очевидного, і я хотів би це очистити. Ось моє розуміння. У компоненті наївної реакції ми маємо states& props. Оновлення stateз setStateповторною візуалізацією всього компонента. propsв основному лише для читання, і їх оновлення не має сенсу. У реакційному компоненті, який передплачує сховище редукцій, через щось …

86 reactjs  redux  react-redux 

Проблема Я встановлюю реакцію refза допомогою вбудованого визначення функції render = () => { return ( <div className="drawer" ref={drawer => this.drawerRef = drawer}> тоді в componentDidMountDOM посилання не встановлено componentDidMount = () => { // this.drawerRef is not defined Я розумію, що refзворотний виклик повинен виконуватися під час монтування, однак …

86 javascript  reactjs 

На відміну від ListView, ми можемо оновити this.state.datasource. Чи існує якийсь метод або приклад для оновлення FlatList або його повторного відтворення? Моя мета - оновити текстове значення, коли користувач натискає кнопку ... renderEntries({ item, index }) { return( <TouchableHighlight onPress={()=> this.setState({value: this.state.data[index].value+1})> <Text>{this.state.data[index].value}</Text> </TouchableHighlight> ) } <FlatList ref={(ref) => { …

86 reactjs  react-native  react-native-flatlist 

Моя мета - додавати компоненти динамічно на сторінку / батьківський компонент. Я почав з базового прикладу шаблону, подібного до цього: main.js: var App = require('./App.js'); var SampleComponent = require('./SampleComponent.js'); ReactDOM.render(<App/>, document.body); ReactDOM.render(<SampleComponent name="SomeName"/>, document.getElementById('myId')); App.js: var App = React.createClass({ render: function() { return ( <div> <h1>App main component! </h1> <div …

86 javascript  reactjs  babeljs 

Я в процесі впровадження списку, який можна фільтрувати, за допомогою React. Структура списку така, як показано на малюнку нижче. ПРОМІСЛЯ Ось опис того, як це має працювати: Стан знаходиться в компоненті найвищого рівня - Searchкомпоненті. Стан описується наступним чином: { видимий: логічний, файли: масив, відфільтровано: масив, запит: рядок, currentlySelectedIndex: ціле …

86 javascript  list  reactjs 

Я налаштував eslint& eslint-plugin-react. Коли я запускаю ESLint, лінтер повертає no-unused-varsпомилки для кожного компонента React. Я припускаю, що це не визнає, що я використовую синтаксис JSX або React. Будь-які ідеї? Приклад: app.js import React, { Component } from 'react'; import Header from './header.js'; export default class App extends Component { …

86 javascript  reactjs  jsx  eslint 

У мене є редуктор, і для обчислення нового стану мені потрібні дані з дії, а також дані з частини стану, не керованої цим редуктором. Зокрема, у редукторі, який я покажу нижче, мені потрібен доступ до accountDetails.stateOfResidenceIdполя. InitialState.js: export default { accountDetails: { stateOfResidenceId: '', accountType: '', accountNumber: '', product: '' …

86 javascript  reactjs  redux 

У мене виникла проблема з реакцією-вибором. Я використовую форму redux, і я зробив свій компонент реакції-вибору сумісним із формою redux. Ось код: const MySelect = props => ( <Select {...props} value={props.input.value} onChange={value => props.input.onChange(value)} onBlur={() => props.input.onBlur(props.input.value)} options={props.options} placeholder={props.placeholder} selectedValue={props.selectedValue} /> ); і ось як я це роблю: <div className="select-box__container"> …

86 reactjs  default-value  react-select 

У мене є компонент, який іноді потрібно буде відображати як a, <anchor>а інший раз як a <div>. propЯ читав , щоб визначити це, є this.props.url. Якщо він існує, мені потрібно зробити компонент, загорнутий у файл <a href={this.props.url}>. В іншому випадку він просто відображається як <div/>. Можливо? Це те, що я …

86 javascript  reactjs