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

Ось моя ситуація: на цьому.handleFormSubmit () я виконую цей.setState () всередині цього.handleFormSubmit () я дзвоню це.findRoutes (); - від цього залежить успішне завершення цього.setState () this.setState (); не завершується до виклику цього.findRoutes ... Як я зачекаю, коли завершиться this.setState () всередині цього.handleFormSubmit (), перш ніж викликати this.findRoutes ()? Підрозділ: поміщаючи …

107 javascript  reactjs  state 

Коли я пишу webpack.config.js так module.exports = { entry: './index.jsx', output: { filename: 'bundle.js' }, module: { loaders: [{ test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel', query: { presets: ['es2015', 'react'] } }] } }; І index.jsxя імпортую reactмодульApp import React from 'react'; import { render } from 'react-dom'; import App …

107 reactjs  webpack  webpack-dev-server 

Я хотів би встановити заголовок документа (у рядку заголовка браузера) для моєї програми React. Я спробував використати response-document-title (здається застарілим) і встановити document.titleв constructorі componentDidMount()- жодне з цих рішень не працює.

107 javascript  reactjs  dom 

У мене виникла проблема, коли повторне відображення стану спричиняє проблеми з інтерфейсом, і мені було запропоновано оновити лише певне значення всередині мого редуктора, щоб зменшити кількість рендеринга на сторінці. це приклад моєї держави { name: "some name", subtitle: "some subtitle", contents: [ {title: "some title", text: "some text"}, {title: "some …

106 javascript  reactjs  redux 

Я ініціалізував i18nоб’єкт перекладу один раз у компоненті (перший компонент, який завантажується у програмі). Цей же об'єкт потрібен у всіх інших компонентах. Я не хочу повторно ініціалізувати його у всіх компонентах. Який шлях? Надання його доступності для області вікон не допомагає, оскільки мені потрібно використовувати його в render()методі. Будь ласка, …

106 reactjs  javascript-globalize 

Що робить npm run ejectкоманда? Я розумію, які інші команди люблять запускати, будувати, тестувати. Але поняття про викид немає.

106 reactjs  webpack  create-react-app  react-scripts 

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

105 javascript  reactjs  redux 

Я переглядаю список публікацій. Для кожної публікації я хотів би зробити тег прив’язки з ідентифікатором публікації як частини рядка href. render: function(){ return ( <ul> { this.props.posts.map(function(post){ return <li key={post.id}><a href='/posts/'{post.id}>{post.title}</a></li> }) } </ul> ); Як це зробити так, щоб у кожній публікації був href /posts/1, /posts/2тощо?

105 javascript  reactjs 

У мене є кілька побічних ефектів, які я маю застосувати, і хочу знати, як їх організувати: як одноразовий ефект або кілька ефектів використання Що краще з точки зору продуктивності та архітектури?

105 reactjs  react-hooks 

Яка різниця між завантажувачами та плагінами в webpack? Документація для плагінів просто говорить: Використовуйте плагіни, щоб додати функціональні можливості, зазвичай пов'язані з пакетами в webpack. Я знаю, що babel використовує завантажувач для перетворень jsx / es2015, але, схоже, інші поширені завдання (наприклад, copy-webpack-plugin) використовують плагіни.

104 javascript  reactjs  webpack 

Я переглядав документацію про гачки, коли натрапив useRef. Дивлячись на їх приклад ... function TextInputWithFocusButton() { const inputEl = useRef(null); const onButtonClick = () => { // `current` points to the mounted text input element inputEl.current.focus(); }; return ( <> <input ref={inputEl} type="text" /> <button onClick={onButtonClick}>Focus the input</button> </> ); …

104 javascript  reactjs  react-hooks 

Будь-який спосіб запобігти появі /#/в адресному рядку веб-переглядача під час використання react-router? Це з ReactJS. тобто Переходи по посиланнях , щоб перейти на новий маршрут шоу localhost:3000/#/або localhost:3000/#/about. Залежно від маршруту.

103 reactjs  react-router 

Я запускаю ворсинку зі своїм додатком React, і я отримую цю помилку: error JSX props should not use arrow functions react/jsx-no-bind І ось я запускаю функцію стрілки (всередині onClick): {this.state.photos.map(tile => ( <span key={tile.img}> <Checkbox defaultChecked={tile.checked} onCheck={() => this.selectPicture(tile)} style={{position: 'absolute', zIndex: 99, padding: 5, backgroundColor: 'rgba(255, 255, 255, 0.72)'}} …

103 javascript  reactjs  ecmascript-6  jsx  arrow-functions 

Скажімо, у мене є компонент перегляду, який має умовне візуалізацію: render(){ if (this.state.employed) { return ( <div> <MyInput ref="job-title" name="job-title" /> </div> ); } else { return ( <div> <MyInput ref="unemployment-reason" name="unemployment-reason" /> <MyInput ref="unemployment-duration" name="unemployment-duration" /> </div> ); } } MyInput виглядає приблизно так: class MyInput extends React.Component { …

103 javascript  reactjs 

Без використання класу, як я можу використовувати PropTypes у функціональному безкомпонентному компоненті реагування? export const Header = (props) => ( <div>hi</div> )

103 javascript  reactjs  react-props  react-proptypes