Вопросы с тегом «reactjs»

В этой документации React сказано, что shallowCompare выполняет поверхностную проверку равенства для текущих объектов props и nextProps, а также для объектов текущего состояния и nextState. Я не могу понять, что если он неглубоко сравнивает объекты, тогда метод shouldComponentUpdate всегда будет возвращать true, так как Мы не должны изменять состояния. и …

97 javascript  reactjs 

Недавно я много изучал функциональность и способы использования JavaScript-библиотеки Facebook React.js. Говоря о его отличиях от остального мира JavaScript, часто упоминаются два стиля программирования declarativeи imperative. В чем разница между ними?

97 reactjs 

Как я могу вручную вызвать событие щелчка в ReactJS ? Когда пользователь нажимает на element1, я хочу автоматически запускать щелчок по inputтегу. <div className="div-margins logoContainer"> <div id="element1" className="content" onClick={this.uploadLogoIcon}> <div className="logoBlank" /> </div> <input accept="image/*" type="file" className="hide"/> </div>

97 html  reactjs 

Пробую TypeScript для проекта React, и я застрял на этой ошибке: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ train_1: boolean; train_2: boolean; train_3: boolean; train_4: boolean; }'. No index signature with a parameter of type 'string' was found on …

97 reactjs  typescript 

Я новичок в библиотеке React.js, просматривал некоторые учебники и наткнулся на: this.setState this.replaceState Приведенное описание не очень четкое (ИМО). setState is done to 'set' the state of a value, even if its already set in the 'getInitialState' function. Так же, The replaceState() method is for when you want to clear …

96 javascript  frontend  reactjs 

Я понимаю, как (и почему ) добавить пробел в JSX, но мне интересно, что лучше всего делать и есть ли реальная разница? Оберните оба элемента в промежуток <div className="top-element-formatting"> <span>Hello </span> <span className="second-word-formatting">World!</span> </div> Добавьте их в одну строку <div className="top-element-formatting"> Hello <span className="second-word-formatting">World!</span> </div> Добавить пространство с помощью JS …

96 javascript  reactjs  react-jsx 

Я очень новичок в webpack, я обнаружил, что в производственной сборке мы можем уменьшить размер общего кода. В настоящее время webpack собирает около 8 МБ файлов, а main.js - около 5 МБ. Как уменьшить размер кода в производственной сборке? Я нашел образец файла конфигурации веб-пакета из Интернета, я настроил свое …

95 node.js  reactjs  npm  webpack  webpack-dev-server 

Я ожидаю, что состояние перезагрузится при изменении реквизита, но это не работает, и userпеременная не обновляется при следующем useStateвызове, что не так? function Avatar(props) { const [user, setUser] = React.useState({...props.user}); return user.avatar ? (<img src={user.avatar}/>) : (<p>Loading...</p>); } кодовый ключ

95 reactjs  react-hooks 

Согласно документам: componentDidUpdate()вызывается сразу после обновления. Этот метод не вызывается для первоначального рендеринга. Мы можем использовать новый useEffect()хук для моделирования componentDidUpdate(), но похоже, что useEffect()он запускается после каждого рендеринга, даже в первый раз. Как мне заставить его не запускаться при начальном рендере? Как вы можете видеть в приведенном ниже примере, …

95 javascript  reactjs  react-hooks 

Я разбираю пример задачи Redux, чтобы попытаться понять его. Я читал, что это mapDispatchToPropsпозволяет отображать действия диспетчеризации в качестве свойств, поэтому я подумал о переписывании, addTodo.jsчтобы использовать mapDispatchToProps вместо вызова диспетчеризации (addTodo ()). Я назвал это addingTodo(). Что-то вроде этого: import React from 'react'; import {connect} from 'react-redux'; import addTodo …

95 javascript  reactjs  redux  react-redux 

Я хочу вызвать метод, предоставляемый компонентом React, из экземпляра элемента React. Например, в этом файле jsfiddle . Я хочу вызвать alertMessageметод по HelloElementссылке. Есть ли способ добиться этого без написания дополнительных оболочек? Изменить (скопированный код из JSFiddle) <div id="container"></div> <button onclick="onButtonClick()">Click me!</button> var onButtonClick = function () { //call alertMessage …

95 reactjs 

У меня есть библиотека компонентов, в которой я пишу модульные тесты для использования Jest и react-testing-library. На основе определенных свойств или событий я хочу убедиться, что определенные элементы не отображаются. getByText, getByTestIdи т. д. выдают ошибку, react-testing-libraryесли элемент не найден, что приводит к сбою теста до срабатывания expectфункции. Как вы …

95 reactjs  jestjs  react-testing-library 

Я хотел бы спросить, как реагировать на нативный дескриптор или делать отзывчивый шрифт. Например, в iphone 4s у меня есть fontSize: 14, а в iphone 6 - fontSize: 18.

95 ios  reactjs  react-native 

Иногда у меня есть компоненты реакции, которые концептуально сохраняют состояние, и я хочу их сбросить. Идеальное поведение было бы эквивалентно удалению старого компонента и чтению нового, нетронутого компонента. React предоставляет метод, setStateкоторый позволяет устанавливать собственное явное состояние компонентов, но исключает неявное состояние, такое как фокус браузера и состояние формы, а …

94 reactjs 

Просматривая HTML-код некоторых страниц, я заметил, что некоторые из них используют этот атрибут data-reactid, например: <a data-reactid="......" ></a> Что это за атрибут и какова его функция?

94 javascript  html  reactjs