редакс?

Может кто-нибудь знает где подробнее почитать про это

Дак тут простая работа с ui

аа

При клике на один компонент, должен поменяться другой

Ну прокидовай пропсы, отлавливай изменения

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

У меня есть 2 компонента, они находятся в третьем

нуууу

Они не являются предками/потомками друг другу

Parent { child - 1 child - 2 }

Один является инпут, второй одной из кнопок, при клике на кнопку нужно изменить инпут

При клике на один компонент, должен поменяться другой

Простой способ - передать из родителя функцию которая при вызове поменяет стейт в нем, если не хочешь ее каждый раз пробрасывать в глубь, то юзай контекст. Ну и ваще адовый способ - хранить рефы детей и вызывать у них методы напрямую, но это скользкая дорожка)

Ну сейчас так попробую

При клике на один компонент, должен поменяться другой

http://andrewhfarmer.com/component-communication/

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

Ну сейчас попробую все это сделать

http://andrewhfarmer.com/component-communication/

Вроде же все забраковали использование ref?

Вроде же все забраковали использование ref?

Ну строковые же только

ref ваще антипаттерн. если только напрямую с элементом DOM'a не работаем. на ненативные элементы его вешать точно неправильно

child -> parent реализуется через общий стейт. собственно, редакс и любые стейт хранилища для этого и делались

child -> parent реализуется через общий стейт. собственно, редакс и любые стейт хранилища для этого и делались

да, я говорил про редакс, но он типа использует простой ui и нет смысла использовать стейт хранилища

значит пусть структуру делает другую

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

а скиньте пожалуйста ссылку на то что "ref - это антипатерн", мне не понятно чем плохо получать компонент по ссылке

а скиньте пожалуйста ссылку на то что "ref - это антипатерн", мне не понятно чем плохо получать компонент по ссылке

Присоединяюсь.

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

Я так понимаю, человек и до колбеков не дозрел ещё. Стоило бы с этим разобраться.

ref ваще антипаттерн. если только напрямую с элементом DOM'a не работаем. на ненативные элементы его вешать точно неправильно

а скиньте пожалуйста ссылку на то что "ref - это антипатерн", мне не понятно чем плохо получать компонент по ссылке

^

если приходится использовать ref на кастомных элементах это говорит о том что архитектура кривая. view = render(state); с рефами ты просто пытаешься закостылить какое-то поведение

мы не работаем с DOM, как с объектом

это всего лишь декларация

если приходится использовать ref на кастомных элементах это говорит о том что архитектура кривая. view = render(state); с рефами ты просто пытаешься закостылить какое-то поведение

именно

кто с бэкбона переходит страдает таким подходом. там это норма

да сколько уже можно )

сколько это еще протянется?

еще пару лет выдалбливать?

дофига это еще протянется, куча крупных контор сидят с горами легаси на проектах

я уж не говорю про более мелкие

ref не про DOM, findDOMNode про дом, а реф про ссылку на инстанс компонента. Возьмем к примеру draft.js У компоненты Editor куча статик методов для управления стейтами и всякие focus/blur/etc...

у тебя нет "инстансов компонента"

это не ооп

это так сложно, серьезно?

у тебя этот "инстанс" живет 1/60 секунды, если у тебя такой фреймрейт, допустим

или дольше, если ты добавишь оптимизаций на willComponentUpdate

это misconception

нельзя в реакте думать "инстансами"

если тебе надо залезть во внутренности чужой либы и нет другого способа как через ref - это можно понять. просто кривое API либы. но это, определенно, костыль.

я бы подумал на PR на нужную фичу. вдруг не ты один таким страдаешь.

Простой способ - передать из родителя функцию которая при вызове поменяет стейт в нем, если не хочешь ее каждый раз пробрасывать в глубь, то юзай контекст. Ну и ваще адовый способ - хранить рефы детей и вызывать у них методы напрямую, но это скользкая дорожка)

https://facebook.github.io/react/docs/context.html#why-not-to-use-context

If you aren't an experienced React developer, don't use context. There is usually a better way to implement functionality just using props and state.

If you insist on using context despite these warnings, try to isolate your use of context to a small area and avoid using the context API directly when possible so that it's easier to upgrade when the API changes.

с контекстом можно натерпеться. особенно тем кто с редаксом работает. по умолчанию { pure: true } в коннекте. и изменения контекста без изменений пропсов и стора не приводят к перерендеру. так-то )

так что повнимательнее. крайне занятные грабли иногда вылазят если контекст может меняться и ты на это заложился

Не могу в родительском компоненте получить пропсы дочернего

? это как ваще. родительский их в дочерний и передает

Ну вот я их передал

https://twitter.com/HeemFrederic/status/817762195203309568

А как их получать

Чтоб в методе использовать

Не могу в родительском компоненте получить пропсы дочернего

вся идея реакта состоит в этом. В том, что ты не должен этого хотеть

https://facebook.github.io/react/docs/refs-and-the-dom.html Кто там просил ссылку на рефы

Метод дочернего элемента находится в родительском и в этом методе мне нужно получить пропсы

https://facebook.github.io/react/docs/refs-and-the-dom.html#dont-overuse-refs

Метод дочернего элемента находится в родительском и в этом методе мне нужно получить пропсы

а зачем он в родительском находится?

ERROR: S client not available

у тебя явно в архитектуре про*бы

Метод дочернего элемента находится в родительском и в этом методе мне нужно получить пропсы

и почему родительский компонент не знает об этих пропсах?

если это общий метод - выноси его как static и обращайся

а еще лучше сразу в родительском считай через него что надо и отдавай в чайлда

чайлд если не имеет своего стейта полностью зависит от пропсов родителя. ну и очень частный случай от реального DOM'a. так что все что можно посчитать в чайлде можно посчитать и в родителе, обычно

В чайлде стэйтов нет

если родительскому компоненту вдруг понадобились пропсы дочернего, который получает их из store - тогда проблема в другом месте

В чайлде стэйтов нет

тогда доступ к этим пропсам есть у родительского

А подскажите, как можно элегантно разрулить вот такой кейс: Есть реакт компонент https://github.com/seibelj/react-simple-markdown-editor Представляет собой набор кнопочек B I S H1 H2 H3 для «маркдаунизации» какой-нибудь textarea. Но с textarea он работает напрямую через DOM, минуя реакт. Требует указать element.id от textarea. Ну это ещё терпимо. Но у него прикол в том, что после клика на кнопочку, значение textarea в DOMе меняется, но событие textarea onChange не триггерится. Соответственно, если нажать на какую-нибудь кнопку, то в state ничего не запишется, пока ты сам ты вызовешь onChange (например, дописав что-нибудь ещё в textarea). Благо, что клик по кнопке переводит фокус на textarea. Поэтому я решил проблему тем, что помимо onChange повесил ещё onBlur. Работает, но чувствуется костыльность. Можно ли было поступить как-то иначе?

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

Кстати, у меня вот такой вопрос, если искать в команду человека, который пишет на реакте... Все ли фронтенд разработчики умеют верстать? Это как бы опционально? Это ни в коем случае не хантинг^^

как можно писать на реакте и не верстать, я не очень понимаю.

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

Пробовал. Реально не нашёл ничего, что полностью бы подходило. Это — лучшее.

форкни и имплементируй. потом PR сделаешь. чсв почешешь, людям поможешь )

Вот в общем Li дочерний получается, в метод change flag нужно получить пропсы Li countryFlag и countrName

форкни и имплементируй. потом PR сделаешь. чсв почешешь, людям поможешь )

Мне его идея работы через DOM не нравится. Так что разве что свой компонент с нуля писать. А я пока не дорос. =)

Пробовал. Реально не нашёл ничего, что полностью бы подходило. Это — лучшее.

Пиши свой :D

написать MD-редактор - это не просто, а супер-просто. Либ, которые умеют маркдаун (и для реакта тоже) - тьма

https://github.com/acdlite/react-remarkable

как вариант

как можно писать на реакте и не верстать, я не очень понимаю.

Так вёрстка это же не только html-разметка.

жуть-то какая ) не лень копипастить было? сделай массив и перебирай через .map в changeFlag сделай changeFlag(flag, country) { return { } } хэндлеры объявляй через onClick={this.changeFlag(flag, country)}

https://github.com/acdlite/react-remarkable

Это для рендеринга. Это другая задача.

Это для рендеринга. Это другая задача.

какая у тебя задача?

тебе что именно надо?

жуть-то какая ) не лень копипастить было? сделай массив и перебирай через .map в changeFlag сделай changeFlag(flag, country) { return { } } хэндлеры объявляй через onClick={this.changeFlag(flag, country)}

а то ты сначала туда пропсы передаешь, а потом их через, реально, анус, пытаешься достать. через e.target.innerHTML аж )

какая у тебя задача?

Редактор markdown. Просто набор кнопочек и textarea. Без WYSIWYG.

редакторов MD настолько дофига и они все такие разные

что ты хочешь видеть? Тебе нужен превью?

что ты хочешь видеть? Тебе нужен превью?

Наоборот. Без него. Максимально простой. Кнопки и сырой текст.

поправочка changeFlag(flag, country) { return { } } читать как changeFlag(flag, country) { return () => { } }

всем привет, кто может помочь с reselect?