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

Я працюю над додатком для реагування, використовуючи response-router. У мене є сторінка проекту, яка має URL-адресу наступним чином: myapplication.com/project/unique-project-id Коли компонент проекту завантажується, я запускаю запит даних для цього проекту з події componentDidMount. Зараз я зіткнувся з проблемою, коли, якщо я переключаюсь безпосередньо між двома проектами, так змінюється лише ідентифікатор …

99 reactjs  react-router 

Ось мій поточний робочий процес для імпорту зображень та піктограм у веб-пакет через 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 src={turtle} …

99 reactjs  webpack  ecmascript-6 

У мене є два компоненти: батьківський компонент, з якого я хочу змінити стан дочірнього компонента: class ParentComponent extends Component { toggleChildMenu() { ????????? } render() { return ( <div> <button onClick={toggleChildMenu.bind(this)}> Toggle Menu from Parent </button> <ChildComponent /> </div> ); } } І дочірній компонент : class ChildComponent extends Component …

99 javascript  reactjs 

Чи існують способи моделювання componentDidMountфункціональних компонентів React за допомогою гачків?

99 javascript  reactjs  react-hooks 

У мене є деякі дані, що називаються станціями, це масив, що містить об'єкти. stations : [ {call:'station one',frequency:'000'}, {call:'station two',frequency:'001'} ] Я хотів би відобразити компонент ui для кожної позиції масиву. Поки що я можу писати var stationsArr = [] for (var i = 0; i < this.data.stations.length; i++) { …

98 javascript  reactjs 

У мене є таке: <Route name="app" path="/" handler={App}> <Route name="dashboards" path="dashboards" handler={Dashboard}> <Route name="exploreDashboard" path="exploreDashboard" handler={ExploreDashboard} /> <Route name="searchDashboard" path="searchDashboard" handler={SearchDashboard} /> <DefaultRoute handler={DashboardExplain} /> </Route> <DefaultRoute handler={SearchDashboard} /> </Route> При використанні DefaultRoute SearchDashboard відображається неправильно, оскільки будь-яка * Інформаційна панель повинна бути відображена на панелі керування. Я хотів би, …

98 javascript  routes  reactjs  url-redirection  react-router 

Я створюю форму в React Native і хотів би зробити свою TextInput 80% ширини екрану. З HTML і звичайним CSS це було б просто: input { display: block; width: 80%; margin: auto; } За винятком того, що React Native не підтримує display властивість, відсоткові ширини або автоматичні поля. То що …

98 javascript  css  reactjs  react-native 

Скажімо, у мене є список простих предметів, this.state.listякі я можу потім використовувати для відображення списку дітей. Який тоді правильний спосіб вставити об'єкт у this.state.list? Нижче - єдиний спосіб, на який я думаю, що це буде працювати, тому що ви не можете мутувати this.stateбезпосередньо, як зазначено в документі. this._list.push(newObject): this.setState({list: this._list}); …

97 javascript  reactjs 

Після подання форми я намагаюся doSomething()замість стандартної поведінки публікацій. Очевидно в React, onSubmit - це підтримувана подія для форм. Однак, коли я пробую такий код: var OnSubmitTest = React.createClass({ render: function() { doSomething = function(){ alert('it works!'); } return <form onSubmit={doSomething}> <button>Click me</button> </form>; } }); Метод doSomething()запущений, але після …

97 javascript  forms  form-submit  reactjs  onsubmit 

Я просто пишу для введення тексту, і onChangeякщо я дзвоню setState, то React відображає мій інтерфейс. Проблема полягає в тому, що введення тексту завжди втрачає фокус, тому мені потрібно фокусувати його ще раз для кожної літери: D. var EditorContainer = React.createClass({ componentDidMount: function () { $(this.getDOMNode()).slimScroll({height: this.props.height, distance: '4px', size: …

97 javascript  reactjs 

Я вже використовую функції ECMAScript 6 та ECMAScript 7 (завдяки Babel) у своїх додатках - як для мобільних, так і для Інтернету. Очевидно, першим кроком було досягнення рівня ECMAScript 6. Я дізнався багато асинхронних зразків, обіцянки (які насправді є багатообіцяючими), генератори (не впевнений, чому символ *) тощо. Із них обіцянки …

97 javascript  asynchronous  reactjs  async-await  promise 

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

97 animation  reactjs  css-animations  greensock  react-motion 

Я хочу зробити компонент React, який можна перетягнути (тобто переставити за допомогою миші), який, здається, обов'язково включає обробники глобальних станів та розсіяних подій. Я можу зробити це брудним способом, використовуючи глобальну змінну у своєму файлі JS, і, можливо, навіть міг би обернути його в хороший інтерфейс закриття, але я хочу …

97 javascript  reactjs 

Я новачок у ReactJs. Це мій код: var React = require('react'); var ReactDOM = require('react-dom'); var {Route, Router, IndexRoute, hashHistory} = require('react-router'); var Main = require('Main'); ReactDOM.render( <Router history={hashHistory}> <Route path="/" component={Main}></Route> </Router>, document.getElementById('app')); і компілюючи його за допомогою webpack. Також я додав головний компонент до своїх псевдонімів. Консоль видає …

97 reactjs  react-router 

Я намагаюся передати ім'я класу компоненту response, щоб змінити його стиль, і, здається, не працює: class Pill extends React.Component { render() { return ( <button className="pill {this.props.styleName}">{this.props.children}</button> ); } } <Pill styleName="skill">Business</Pill> Я намагаюся змінити стиль таблетки, передавши назву класу, який має відповідний стиль. Я новачок у React, тому, можливо, …

97 javascript  reactjs