These are chat archives for dev-ua/reactjs

29th
May 2017
Nikita
@RedDevilHat
May 29 2017 03:05
всем привет
Dima Bildin
@bildja
May 29 2017 08:25
@divan “программно” же можно ставить стейт, в зависимости от которого рендерить редирект компонент
Ivan Daniluk
@divan
May 29 2017 11:04
@bildja а если я не знаю какой компонент отображается? мало-ли откуда сгенерировался экшн
Dima Bildin
@bildja
May 29 2017 11:05
Делать это на верхнем компоненте
Если это про авторизацию, то тут же есть пример, как сделать
https://reacttraining.com/react-router/web/example/auth-workflow
Ivan Daniluk
@divan
May 29 2017 11:06
Ну вот, там используется history.push('/'))
Dima Bildin
@bildja
May 29 2017 11:07

Ну тогда

Но, блин, почему ни в одном туториале этого нет :/

это неправда)

Ivan Daniluk
@divan
May 29 2017 11:08
так history.push() у меня не заработал
history.go() заработал
Dima Bildin
@bildja
May 29 2017 11:08
history.go() is a native api, not RR
Ivan Daniluk
@divan
May 29 2017 11:10
native api чего?
я на самом деле просто вывел в конcоль объект history и посмотрел его методы, перепробовал все
что-то в доке написано вообще не то
go(n) - (function) Moves the pointer in the history stack by n entries
как оно тогда у меня работает? я же строку передаю.
Terry Sahaidak
@terrysahaidak
May 29 2017 11:52
в РР використовується https://www.npmjs.com/package/history
Ivan Daniluk
@divan
May 29 2017 12:00

Ладно, я пока эту часть не трогаю, раз уж работает )

Тут другой вопрос. Есть компонент, который рисует таблицу. Ему на вход (в props) передаются данные от API - просто массив объектов, с полями вроде ID, Name, Foo, Bar и тд.

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

Ну тоесть есть:
data = [{id: 1, name: "foo", place: {name: "placefoo"}}, {id: 2, name: "bar", place: { name: "placebar"}},...]

и компонент , скажем. <MyTable data={data} columns={['name', 'place']}

В компоненте я делаю что-то вроде такого:

   {this.props.data.map((item, i) =>
                                    <TableRow key={i} value={item} style={rowHeight}>
                                        <TableRowColumn style={rowHeight}>{item.name}</TableRowColumn>
                                        <TableRowColumn style={rowHeight}>{item.place.name}</TableRowColumn>
                                    </TableRow>
                                )}

Но надо чтобы рендерилось не 2 захардкодженых columns, а вот те которые указаны в columns.

Dima Bildin
@bildja
May 29 2017 12:03
Так же как и строки же?
item.columns.map(col => <TableRowColumn/>)
Ivan Daniluk
@divan
May 29 2017 12:05
тоесть строка "place.name" автоматически сконвертируется в (даже не знаю как это правильно называется) обращение к полю объекта {item.place.name}?
SilentImp
@SilentImp
May 29 2017 12:11
Всем привет, можно вопрос?
Есть css-модули. С ними имена классов в dom — хеш;
В браузере, даже если есть сорсмап, видны именно они. Вообще нечитаемые.
Это нормально или я просто не умею их готовить?
Если нормально, то как ориентироваться в инспекторе с такими именами?
Dima Bildin
@bildja
May 29 2017 12:18
Это нормально, в вебпаке ты можешь настроить, что именно там рендерится, делают типа [path]__[name]__[hash], то есть по первым двум ты можешь понять, что это за класс
SilentImp
@SilentImp
May 29 2017 12:19
сейчас попробую, спасибо
Dima Bildin
@bildja
May 29 2017 12:19
localIdentName настройка вроде
SilentImp
@SilentImp
May 29 2017 12:24
localIdentName: '[local]::[hash:base64:24]', — решил проблему, спасибо
Dima Bildin
@bildja
May 29 2017 12:30

::

класс может состоять из двоеточий?)

SilentImp
@SilentImp
May 29 2017 13:12
он может состоять из смайлов. причем кирилицей.
впрочем оно всё равно заменяет из на -
А вот скажите, чем сейчас модно локализировать приложения на реакт без головной боли?
SilentImp
@SilentImp
May 29 2017 13:20
react-i18next?
Dima Bildin
@bildja
May 29 2017 13:24
Или react-intl
SilentImp
@SilentImp
May 29 2017 15:44

Вопрос на засыпку, а вот есть библиотека которая не предусматривает использование css-модулей.
И её подключили в проект который предусматривает.
Как бы её собрать без css-модулей, и включить в один бандл с основным.
при том что настройка выглядит как

      {test   : /\.css$/,
        loader : ExtractTextPlugin.extract({
          fallback: 'style-loader', 
          use: [{loader: 'css-loader', 
              query: {modules: true,
                sourceMap: true,
                localIdentName: '[local]~~~~[hash:base64:24]',
              },},]})},

Можно попробовать вычленить модуль по пути, но как его тогда в тот же бандл запихнуть, который делает ExtractTextPlugin.extract?

SilentImp
@SilentImp
May 29 2017 17:13
Решилось использованием require('raw-loader!path/main.css');