6
голосов
Принятый
Анимация блока из раскладывающихся плиток
.c-weird-btn {
position: relative;
width: 10rem; height: 10rem;
perspective: 600px; }
.c-weird-btn .o-tile {
position: absolute;
width: 50%; height: 50%;
background: no-...
4
голоса
Принятый
React TypeError: this is undefined
React не устанавливает контекст для обработчиков событий. Добавьте this.Clicker = this.Clicker.bind(this) в конструктор.
4
голоса
Принятый
Как передать модульные стили через props'ы? React
Общая идея такая:
// компонент родитель
import React from "react"
import Child from "./path/to/Child"
import styles from "./Parent.module.css"
const Parent = () => {
...
3
голоса
Принятый
VS Code как сделать запрет переноса строк html в jsx?
Вопрос закрыт,
Элемент списка все решилось установкой плагина - JavaScript VS Code JavaScript (ES6) snippets, https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets
Либо ...
3
голоса
Принятый
Как задать data атрибут?
Первый способ добавления дата атрибутов в старых версия React (<16)
Внутри жизненного цикла componentDidMount в классовых компонентах
componentDidMount: function() {
const el = ReactDOM....
3
голоса
Как задать data атрибут?
Реакт поддерживает data- аттрибуты:
React supports all data-* and aria-* attributes as well as every attribute in the following lists. Мануал
Пример в 15 версии:
class App extends React....
3
голоса
Как сделать плавающий блок? React
Вручную делать sticky-элемент с помoщью JS довольно муторно и особого смысла не имеет так как большинство современных браузеров уже давно поддерживают position sticky:
div {
position: sticky;
...
3
голоса
Принятый
Два if в тернарном операторе react if else
Лучше так:
Вариант 1
const userText = useMemo(() => {
switch (user) {
case 'Ivan':
return 'Пользователя зовут Иван';
case 'Boris':
return 'Пользователя зовут Борис';
...
2
голоса
Не работает скрипт в React.Js
На сколько я знаю, с версии React@15.5 удалили React.createClass, поэтому лучше использовать ключевое слово class. В общем, почитайте официальную документацию, там много полезного можно найти.
Так ...
2
голоса
Принятый
Не расспознается @ при использовании react
. !!! автор вопроса не использует TS (.jsx)
-> предполагается использование Babel
-> о нём и речь в тексте ниже
судя по тому, что декараторы вы называете собачкой - я настоятельно рекомендую:
...
2
голоса
Принятый
Появление блока при onMouseMove, React.js
Возможно, вам подойдет такое решение (можно использовать собственный debounce, можно установить lodash (npm i --save lodash), откуда подключить уже готовую функцию. В данном случае можно использовать ...
2
голоса
Принятый
Группированные React компонентов для вывода в списке
Проблема Ваших данных в том что в объектах нет поля, по которому можно определить тип поста, поэтому я бы поспорил с тем кто Вам посоветовал объединять всё в один массив, так как само это объединение ...
2
голоса
Принятый
Где писать React?
Либо используйте create-react-app либо посмотрите как самостоятельно настроить проект с React и Webpack - вот годная статья
2
голоса
React TypeError: this is undefined
Либо используй стрелочные функции. Они привязывают текущий контекст к функции.
Cklicker = () => { //код функции }
2
голоса
Принятый
Изменение стиля индикаторов в слайдере с reactstrap
Просто в своих стилях перезаписываете классы .carousel-indicators li.
К примеру для индикатора:
.carousel-indicators li {
border-radius: 50%;
width: 10px;
height: 10px;
background-...
2
голоса
Принятый
Программа заходит в обе ветви if
<div>
<div className="App">
<Navbar />
<Requests data={arrayOfRequests} /> <-- есть data
<BrowserRouter>
<Route exact path='/' ...
2
голоса
Принятый
React. Компоненты
Это просто способ структурирования кода.
Nav.Item это такой же компонент, как и любой другой обычный компонент React. Но, в данном случае, мы используем namespace для того, что бы точно знать, какой ...
2
голоса
Принятый
PHPStorm - как включить поддержку JSX
Всё правильно подчеркивает, phpstorm не знает, что вы пишете jsx. Для ide это выглядит, как кусок невалидного html в коде. Нужно включить поддержку jsx:
ctrl + alt + s - открываем настройки
Language &...
2
голоса
как jsx переводится в js код?
Непосредственно JSX довольно просто заменяется вот так:
Прототип функции createElement имеет следующий вид (мы передаем не функцию в render, а объект, созданный при помощи JSX factory - результат ее ...
2
голоса
Как удалить отренедереный компонент в React
Удалять отренедереный компонент не нужно, достаточно вызвать ререндеринг и отрисовать компонент по новой. Предлагаю следующее решение:
Добавляем в стейт выбранного покемона selectedPokemon, ...
2
голоса
Принятый
Параграф в JSX файле
Шаблонные литералы позволяют использовать многострочные строки, которые сохраняют начальные/конечные пробелы и новые строки. Шаблонные литералы должны быть заключены в обратные кавычки. Плюс ко всему ...
2
голоса
Принятый
Как записать полученные объекты в массив в Redux
В редьюсере есть противоречивый код, который не сохраняет каждое новое значение в массив, а просто перезаписывает его. Вот этот код:
return { ...state, pokemonList: action.listEachPokemon }
Чтобы ...
2
голоса
Принятый
Как наследовать тип от JSX.IntrinsicElements.mesh?
ни я ни IntrinsicElements не знаем что такое mesh, но вот пример на div:
// interface QwaProps extends JSX.IntrinsicElements['div'] {} // An interface can only extend an identifier/qualified-name with ...
2
голоса
Принятый
React - как получить data-attribute у текущего объекта
В вашем случае лучше создать компонент для представления региона. В компонент передавать пропсы, например <Region selected={true} onClick={/** */} />, а в самом компоненте уже, в зависимости от ...
2
голоса
Два if в тернарном операторе react if else
Можно, конечно, сделать так
{
user == 'ivan' ? 'Пользователя зовут Иван' :
user == 'Boris' ? 'Пользователя зовут Борис' : 'Не знаю такого пользователя'
}
Но я бы делал так
let res;
switch (user)...
2
голоса
Принятый
Как работают динамические теги JSX?
Babel не проверяет, что такое CustomTag. Ему важно только с большой или маленькой буквы начинается имя. JSX это просто синтаксический сахар и в конечном итоге он превращается в React.createElement. ...
2
голоса
Принятый
Как проверить, что переменная false в jsx
Для того, чтобы использовать условие внутри JSX, нам придется обратиться к тернарному оператору, т.к. конструкция if/else в JSX недоступна. Так же важно заметить, что любое JS выражение, которое ...
1
голос
Принятый
Почему key в React нужен только в перечислениях?
При получении child происходит "уплощение массива" - для избавления от включений map(), которые возвращают массив. Далее сравнение элементов древ можно осуществить следующим алгоритмом:
Мы сравниваем ...
1
голос
Принятый
React. Карусель
Проблема в том, что вы "мутируете" state.
Вместо того, чтобы делать инкремент/декремент значения из стейта, вам нужно возвращать новый стейт. Ниже привожу пример правильной реализации:
...
Only top scored, non community-wiki answers of a minimum length are eligible
Связанные метки
jsx × 131reactjs × 115
javascript × 88
html × 14
css × 13
react-router × 11
react-native × 10
redux × 8
create-react-app × 6
react-router-dom × 5
typescript × 4
babel × 4
react-hook × 4
веб-программирование × 3
webpack × 3
visual-studio-code × 3
scss × 3
localstorage × 3
photoshop × 3
node.js × 2
json × 2
html5 × 2
функции × 2
анимация × 2
frontend × 2