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

Як я можу вручну викликати подію клацання в ReactJS ? Коли користувач натискає елемент1, я хочу автоматично викликати клацання по 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 

Нещодавно я багато вивчав функціонал та способи використання бібліотеки Facebook JavaScript React.js. Говорячи про свої відмінності в іншій частині світу JavaScript часто двох стилів програмування declarativeі imperativeякі згадувалося. Яка різниця між ними?

97 reactjs 

Я новачок у бібліотеці 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 out …

96 javascript  frontend  reactjs 

Я створив веб-сайт з React.js та webpack . Я хочу використовувати шрифти Google на веб-сторінці, тому я розміщую посилання у розділі. Шрифти Google <link href="https://fonts.googleapis.com/css?family=Bungee+Inline" rel="stylesheet"> І встановіть CSS body{ font-family: 'Bungee Inline', cursive; } Однак це не працює. Як я можу вирішити цю проблему?

96 reactjs  webpack  google-font-api 

У цій документації React сказано, що shallowCompare виконує неглибоку перевірку рівності поточного об'єкта props та nextProps, а також поточного стану та об'єктів nextState. Річ, яку я не можу зрозуміти, полягає в тому, що якщо він неглибоко порівнює об'єкти, то метод shouldComponentUpdate завжди поверне true, як Ми не повинні мутувати держави. …

96 javascript  reactjs 

перед тим, як розмістити це запитання, я намагався шукати в sqa stackexchange, але там не знайшов жодного повідомлення про неглибоке та рендеринг, тому сподіваюся, хтось може мені тут допомогти. Коли я повинен використовувати мілководді та візуалізувати для перевірки компонентів реагуючих речовин? Спираючись на документи airbnb, я зробив декілька думок щодо …

95 testing  meteor  reactjs  chai  enzyme 

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

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

Я намагаюся зробити ПРОСТИЙ за допомогою реакційного маршрутизатора ( версія ^ 1.0.3 ) для перенаправлення на інший вигляд, і я просто втомився. import React from 'react'; import {Router, Route, Link, RouteHandler} from 'react-router'; class HomeSection extends React.Component { static contextTypes = { router: PropTypes.func.isRequired }; constructor(props, context) { super(props, context); …

95 javascript  reactjs 

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

95 reactjs 

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

95 reactjs  jestjs  react-testing-library 

Відповідно до документів: componentDidUpdate()викликається відразу після оновлення. Цей метод не викликається для початкового візуалізації. Ми можемо використовувати новий useEffect()хук для імітації componentDidUpdate(), але, схоже useEffect(), запускається після кожного візуалізації, навіть у перший раз. Як змусити його не запускатись на початковому візуалізації? Як ви можете бачити в прикладі нижче, componentDidUpdateFunctionдрукується під …

95 javascript  reactjs  react-hooks 

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

95 reactjs  react-hooks 

Зараз я роблю якийсь React, і мені було цікаво, чи існує "правильний" спосіб зробити умовний стиль. У підручнику, який вони використовують style={{ textDecoration: completed ? 'line-through' : 'none' }} Я вважаю за краще не використовувати вбудований стиль, тому я хочу замість цього використовувати клас для управління умовним стилем. Як можна …

95 javascript  reactjs 

Я намагаюся створити просту форму з реагуванням, але зіткнувся з труднощами, коли дані належним чином прив’язуються до стандартної валути форми. Поведінка, яку я шукаю: Коли я відкриваю свою сторінку, у поле введення тексту слід заповнити текст мого AwayMessage у моїй базі даних. Тобто "Зразок тексту" В ідеалі я хочу мати …

94 javascript  forms  reactjs  coffeescript  2-way-object-databinding 

Окрім можливості встановити "activeClassName" та "activeStyle" на NavLink, чи є якась причина використовувати NavLink over Link під час створення посилань на інші маршрути на не-навігаційних елементах (тобто. Не основна навігація у верхньому або нижньому колонтитулі) на вашому сайті які не потребують активного стану / класу?

94 reactjs  react-router  react-router-v4