Можно

Ой. Я подумал чего-то, что там некая либа, требующая эти аттрибуты. Если свой стайлед, я бы задавал их в нём,не в компоненте. Насколько нормально иначе, не знаю.

"так" - через .attrs().

const Box = styled.div`
   width: ${props => props.width};
`

Тип такого, я с телефона, неудобно

Не, не скажу.

Всем привет. Подскажите как реализовать систему нотификаций с выводом экрана\компонетна по вебсокетам?

Вопрос слишком размыт, но вообще делаешь компонент, который срабатывает при получении сообщения по сокету, через бэк отправляешь сообщение и фронт выдаст уведомление в видео того самого компонента

Подписываешься на события в сокете, по событию вызываешь функцию из react-toastify

можете по подробней подсказать?  нужно ли выносить в контекс или в стор редакса?

Привет, как передать state из компонента A в компонент B, при этом не используя вложенность? я вызываю компонент A и B в общем компоненте C(App.js)

Хранить его в компоненте С, в компонент А передать в пропс функцию, которая изменяет стейт компонента С

спасибо

Как пожелаешь, все зависит от тебя. Если говорить про редакс, то самое удобное место сокету — в саге. Но можно и в санке запустить (только как потом отключаться — я хз). Можно кастомную мидлварю написать, а можно в интернете готовую найти. В контексте я бы не стал оставлять, как и в компоненте. Но это я.

Задуматься о вынесении состояния за пределы реакта

Сможете показать пример мидлваре показать, если не затруднит?

Благодарю)

Скажите, почему это не работает? Это же прямо из документации

      <Router>
        <Switch>
          <Route exact path='/'>
            <Redirect to="/StartPage" />
          </Route>
          <Route exact path="/StartPage" component={StartPage} />
        </Switch>
      </Router>

Не рендерит компонент StartPage. Если убрать редирект и поставить path '/', то рендерит

Ребята, всем привет!
Вопрос не совсем по React.

Мне понравилась дизайн одной навигационной меню и я решил повторить.

Столкнулся с непониманием в тот момент, когда начал доделывать мобильную часть.

В широкоформатном режиме экрана (больше 1000 пикселей) основной список элементов меню расширен, он виден и готов для взаимодействия с пользователем.

В мобильной версии экрана (меньше 1000px) блок со списками элементов навигации имеет стили, а именно height: 0.

При нажатии на кнопку expand (burger), пропадают стили height: 0, добавляется класс ng-animate на пару миллисекунд и тоже, исчезает.

Как это реализовано?

1. Как в js реализованы слушатели событий и как скрипт понимает, что только что экран изменился и нужно добавить стили height: 0?

2. Как думаете, что написано в классе ng-animate? Данный класс реализует анимацию высоты, когда меню расширяется (увеличивается высота с 0).

Поделитесь опытом, пожалуйста 🙏🏻