These are chat archives for dev-ua/reactjs

10th
Aug 2015
Dmitriy Kulichkin
@dkulichkin
Aug 10 2015 08:56

Ребята, привет, помогите плиз с таким вопросом: обычный чекбокс после установки ему defaultChecked (defaultChecked={true}), отрендериваясь на сервере и потом на клиенте дает такую разницу:
(client) lue="shared" checked data-reactid=".6zu3
(server) lue="shared" checked="" data-reactid=".6
из-за чего реакт кидает warning.

Как это пофиксить или что я делаю не так? Вот мой jsx:

<input id="payload-shared" type="radio" name="payload_type" value="shared" defaultChecked={true} />

<input id="payload-unique" type="radio" name="payload_type" value="unique" />

Andrew Utka
@AndreyUtka
Aug 10 2015 09:55
Всем привет. Мы юзаем для UI - http://semantic-ui.com/. В нем есть такие компоненты как модальные окна нарпимер которые юзаються как в jquery-ui. Вот простой пример что бы было лучше понятно о чем речь http://jsfiddle.net/jerm3fcg/light/. Вопрос в том на сколько норм такой подход юзать в react-е ?
Alex Grand
@Arilas
Aug 10 2015 10:01

@AndreyUtka хорошо бы сделать обертку над этим, как например react-bootstrap. React может просто ругнуться на то, что DOM дерево было изменено извне, так как такой подход может из:

<input name="adsf" />

сделать:

<div class="adas">
    <div... />
                     <input name="adsf" />
</div>
vogrelord
@vogrelord
Aug 10 2015 10:01

Подскажите по роутеру плиз

                <Route path='/' handler={App}> 
                      <Route name='edit/:complex_id' handler={BuildingComplexPage}>
                         <Route name='deals' handler={BuildingComplexPage}/> 
                      </Route>                        
                      <Route name='new' handler={BuildingComplexPage}>
                         <Route name='new_deals' path='deals' handler={BuildingComplexPage}/> 
                      </Route>                        
                </Route>

Как кошерно узнать в BuildingComplexPage, какой именно роут к нему привел?

то есть подход с хендлерами я видел, может, есть какой-то менее хардкорный, чем делать 4 класса?
Andrew Utka
@AndreyUtka
Aug 10 2015 10:03
@Arilas спасибо. Сейчас гляну - react-bootstrap.
Alex Grand
@Arilas
Aug 10 2015 10:03
@vogrelord а почему не сделать отдельные роуты, и через props опускать некоторые вещи? Просто в this.context.router можно получить переменные, которые есть в пути. Используйте все же либо насследование, либо композицию
И также можно получить название текущего роута вроде
vogrelord
@vogrelord
Aug 10 2015 10:05
отдельные роуты = отдельные классы?
Alex Grand
@Arilas
Aug 10 2015 10:05
@vogrelord ну да, отдельные хендлеры, которые могут использовать один и тот же компонент
vogrelord
@vogrelord
Aug 10 2015 10:05
ну ладно, видимо нет другого пути
спасибо
Alex Grand
@Arilas
Aug 10 2015 10:10
@vogrelord насколько я понял, это страница создания/редактирования чего-то, поэтому делаешь отдельный хендлер, и форму, в форму через пропсы передаешь "дефолтные" данные, которые препопюлейтятся через defaultValue. Но логика получается по сути отдельная, и не нужно делать switch'и либо if'ы
Dmitriy Kulichkin
@dkulichkin
Aug 10 2015 10:11
@AndreyUtka я тоже как раз юзаю семантик сейчас, но только css часть - врапперы не использую потому что не использую jquery - пишу все компоненты сам. Вообще внезапно очень мало действительно пока что годных UI китов для реакта с нормальным набором компонентов, может разве что material-ui.com.
Alex Grand
@Arilas
Aug 10 2015 10:13
@dkulichkin ну material-ui он очень маленький по компонентам, и он все стили чисто инлайново делает, поэтому кастомные вещи нужно дизайнить заново. Пытался его использовать, но чего-то как-то не очень
Dmitriy Kulichkin
@dkulichkin
Aug 10 2015 10:20
@Arilas не знал, спасибо, но об этом в целом и речь - очень удивительно что до сих пор нет уи кита какого-нибудь нормального в стабильной версии для него. В условиях, когда все jquery-legacy и другие компоненты, завязанные на использование обьекта window, по понятным причинам отпадают - львиную часть всего приходится делать самому
Andrew Utka
@AndreyUtka
Aug 10 2015 10:20
@dkulichkin ну вот тоже думал писать компоненты - самому или нет. Пока подкупает то что у семантика очень круто они реализованы с точки зрения апи и качества работы. И очень хотелось бы заюзать их.
Vladimir Malyk
@vladimir-malyk
Aug 10 2015 10:21
ох и аукнется когданить отрасли всё это велосипедостроение
Andrew Utka
@AndreyUtka
Aug 10 2015 10:22
@Arilas @dkulichkin кстати этот пример с офф страницы семантика http://semantic-ui.com/introduction/integrations.html
Dmitriy Kulichkin
@dkulichkin
Aug 10 2015 10:23
@AndreyUtka если присутствие jquery не есть проблема то да - достаточно просто врапперов. Вот то что мне показалось самым вменяемым:
https://github.com/jessy1092/react-semantify
Andrew Utka
@AndreyUtka
Aug 10 2015 15:15
@dkulichkin тут не то что бы проблема. Гланое что бы присутствие jquery не ломало работу reacta.
то о чем говорил @Arilas

@AndreyUtka хорошо бы сделать обертку над этим, как например react-bootstrap. React может просто ругнуться на то, что DOM дерево было изменено извне, так как такой подход может из:

<input name="adsf" />

сделать:

<div class="adas">
    <div... />
                     <input name="adsf" />
</div>
Jeron Diovis
@jeron-diovis
Aug 10 2015 16:45
Народ, кто сталкивался вот с этой фигнёй и смог понять, почему оно происходит и как с ним бороться?
Alex Afonin
@Tuch
Aug 10 2015 16:47
есть пример кода?
Alex Grand
@Arilas
Aug 10 2015 16:48
@jeron-diovis в общем это очень стремная трабла, уже сталкивался, но обошли. Используем react-router, один компонент рендерился не в себя, а в созданный элемент внутри document.body, и если происходили правки, то оно такое выдавало
То-есть получается так, при рендере у нас был контекст один, при перерендере - другой
Jeron Diovis
@jeron-diovis
Aug 10 2015 16:50

@tuch Там в комментариях к гисту набросали:
https://jsfiddle.net/hg08LLL0/2/

@Arilas А “рендерился в себя” - это вообще как?

И как, собственно, обошли?
Alex Grand
@Arilas
Aug 10 2015 16:53
@jeron-diovis К примеру тултипы, которые в методе render() {return this.props.children} а componentDidMount - рендерят компонент в другом месте. Вообще мы убрали такое использование. И вообще getChildContext() - не используем, только у ребенка задаем, что ему нужно
Jeron Diovis
@jeron-diovis
Aug 10 2015 17:01

@Arilas Хм, вроде такой магии не использую...
Я тут либу юзаю: https://github.com/Chrisui/react-hotkeys
И рендерит она вроде простые вещи:

Вот контексты:
https://github.com/Chrisui/react-hotkeys/blob/master/lib%2FHotKeys.js#L39-L51
https://github.com/Chrisui/react-hotkeys/blob/master/lib%2FHotKeyMapMixin.js#L9-L21

Но если тупо вложить один HotKeys в другой, то дочерний HotKeys не получает в контекст ничего из того, что передает родитель.

Как это можно соотнести с ситуацией “при рендере у нас был контекст один, при перерендере - другой”?

Alex Afonin
@Tuch
Aug 10 2015 17:23
короче может я капитан, но проблема в immutablejs
https://jsfiddle.net/hg08LLL0/11/ - это работает
так что копать нужно в этом направлении
возможно он не проходит по типам из childContextTypes
Jeron Diovis
@jeron-diovis
Aug 10 2015 17:25
Чёрт, а в примере с react-hotkeys иммутабла нету, что мне делать?)