но в 16 реакт это не пустили

уже скоро релиз?

Поэтому такой трюк работает

1) это как раз и есть искуственное повышение 2) нахрена так делать в своей же библиотеке

Специфичность увеличена, но ты матчишь те же элементы - ни больше, ни меньше

известный != распространненый Вот это смущает

Если что-то известно не значит, что все так делают. Антипаттерн например) Для того и известен, чтобы так не делать

1) это как раз и есть искуственное повышение 2) нахрена так делать в своей же библиотеке

1) Это лучше чем вводить посторонние айди/классы

Если что-то известно не значит, что все так делают. Антипаттерн например) Для того и известен, чтобы так не делать

+ убедил

1) это как раз и есть искуственное повышение 2) нахрена так делать в своей же библиотеке

2) я хз

короче странная библиотека )

походу вся работа кипит тут https://github.com/material-components/material-components-web

у одного у меня сообщения пропадают?

типа на телефоне есть те сообщения, которых нет на десктопе

у одного у меня сообщения пропадают?

Какие именно?

Честно завидую тому, как они развивают всю эту тему с материал дизайном

походу вся работа кипит тут https://github.com/material-components/material-components-web

да, кода там дохрена на каждый компонент

А зачем юзать редакс внутри билиотеки?

выпиливаю зависимости вот прямо сейчас. надеюсь на выхах закончу

может стоит дать возможность интергироавть редьюсер в свой редакс?

такая возможность есть (в readme это есть). это была одна из задач, в том числе

https://github.com/fckt/react-layer-stack#store-layers-in-your-redux-store

лол, отправляю с телефона, потом тыкаю с компа по сообщениям, которые цитирую

говорил, что не может найти

говорит

да, кода там дохрена на каждый компонент

Что-то я открыл их кнопку и она уже умеет только сингл тег с текстом. Нужна иконка в кнопке - сорян

а потом находит и пихает в лог

https://github.com/material-components/material-components-web/blob/master/packages/mdc-menu/simple/foundation.js

Что-то как-то, я бы такое побоялся использовать

вот и мне ссыкотно

Что-то я открыл их кнопку и она уже умеет только сингл тег с текстом. Нужна иконка в кнопке - сорян

не верится, наверняка возможно как-то!

У них в плане дизайна все круто описано конечно в демках, но имхо оно не стоит того в вебе. Все эти разные скорости анимаций в зависимости от размера экрана и тд

в целом код в react MUI довольно качественный

я проверял

Он вроде неплох, да. Но там довольно мало всего (может пока) и кто-то жаловался, что у классов имена не поменять

но я имею ввиду https://github.com/callemall/material-ui

там просто полезно по коду пройтись

прям любо-дорого

У них в плане дизайна все круто описано конечно в демках, но имхо оно не стоит того в вебе. Все эти разные скорости анимаций в зависимости от размера экрана и тд

Вообще не должно быть понятия "стоит того в нативных аппах, но не стоит того в вебе" Веб движется к тому, чтобы предоставить экспириенс не хуже нативных апп. Конкретные имплементации бывают плохими, да

чуваки не делают шит

ну, только если местами

там просто полезно по коду пройтись

а мы с камрадами сегодня под это дело взялись пильнуть генератор темок цивильный. велкам если интересно https://t.me/joinchat/AAAAAAt2fulBh3YF7gc8sg

ммм

крутые )

1) это как раз и есть искуственное повышение 2) нахрена так делать в своей же библиотеке

Более семантичный вариант того же - :root .your-selector Специфичность повышается на один класс. Нет wtf-эффекта

кстати, вот вам универсальный способ мапить контекст на свойства компонента, чтобы напрямую на контекст не ссылаться в компоненте: import React from "react" import hoistNonReactStatics from "hoist-non-react-statics" export default function mapContextToProps (contextTypes, compomapContextToProps) { return function (WrappedComponent) { class ConnectContext extends React.Component { static contextTypes = contextTypes render() { if (compomapContextToProps) { throw new Error('compomapContextToProps is not implemented') } return <WrappedComponent { ...this.context } { ...this.props } /> } } return hoistNonReactStatics(ConnectContext, WrappedComponent) } }

mapContextToProps({ intl: React.PropTypes.object })(Component)

вот так например

кстати, вот вам универсальный способ мапить контекст на свойства компонента, чтобы напрямую на контекст не ссылаться в компоненте: import React from "react" import hoistNonReactStatics from "hoist-non-react-statics" export default function mapContextToProps (contextTypes, compomapContextToProps) { return function (WrappedComponent) { class ConnectContext extends React.Component { static contextTypes = contextTypes render() { if (compomapContextToProps) { throw new Error('compomapContextToProps is not implemented') } return <WrappedComponent { ...this.context } { ...this.props } /> } } return hoistNonReactStatics(ConnectContext, WrappedComponent) } }

зачем тут зависимость?

?

hoist-non-react-statics

что это

ща, сек

я думал вопрос по существу

ну я гитхаб нашёл

Copies non-react specific statics from a child component to a parent component. Similar to Object.assign, but with React static keywords blacklisted from being overridden.

описание не особо ясно

юскейс?...

чтобы вытащить

свойства

из оборачиваемого компонента

используется почти везде

по-сути это блек-лист

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

https://github.com/mridgway/hoist-non-react-statics/blob/master/index.js#L7

ого, какая полезная функция function isReferenceType( value ) { return Object(value) === value; }

Хм... Как лучше работать с свг? Я привыкла из него делать иконочные шрифты и использовать их. Но тут, неожиданно, захотелось чего-то большего. На данный момент мне открыли глаза на то, что можно пользоваться лоадерами не только в конфиге вебпака и теперь у меня получилось через raw лоадер грузить код иконок (<svg></svg> вот это вот). Но бяда в том, что этот raw у меня текстом и его надо как-то встроить в дом о.О Пока единственное что приходит на ум - это innerHTML какой-нибудь. Но я чувствую что это какой-то один большой костыль.

<div dangerouslySetInnerHtml={{ __html: yourSvg }} />

ERROR: S client not available

или svg-loader

мм. Спасибо

мм. Спасибо

Сова советует норм способ с опасным хтмл

привет вам. Подскажите пожалуйста адрес чатика по vanilla js ?

Ребят, у меня есть файл с расширением .ep Как его открыть? это прототип сайта на wireframe. мб кто слышал про эту платформу?

привет вам. Подскажите пожалуйста адрес чатика по vanilla js ?

https://t.me/JSlang

большое спасибо вам)

Хм... Как лучше работать с свг? Я привыкла из него делать иконочные шрифты и использовать их. Но тут, неожиданно, захотелось чего-то большего. На данный момент мне открыли глаза на то, что можно пользоваться лоадерами не только в конфиге вебпака и теперь у меня получилось через raw лоадер грузить код иконок (<svg></svg> вот это вот). Но бяда в том, что этот raw у меня текстом и его надо как-то встроить в дом о.О Пока единственное что приходит на ум - это innerHTML какой-нибудь. Но я чувствую что это какой-то один большой костыль.

Первое, есть трасляторы svg в jsx - http://svg-jsx.patmoody.com/ Второе, react-svg-loader с опцией jsx: true Я пробовал и первое (когда надо было менять из React что-то в svg) и второе. Второе на 100% закрывает тему по svg шрифтам

Да с большими инлайнывыми svg у меня переодически подвисает синтаксис в VS Code

Спасибо.

ребята, зачем нам ref={(input) => this.input = input} я понимаю как он работает. а часто ли используется и для чего?

Используется еще как замена componentDidUpdate (если инлайновая запись в виде ref={input=> this.input = input} ) и как componentDidMount ( если вынести в отдельную функцию ref={this.inputRef} ) в копонентах-функциях. Кстати использовать инлайновую запись ref={input=> this.input = input} это антипаттерн, если не нужен коллбек на componentDidUpdate а просто нужно получить сохранить ссылку на элемент - всегда нужно выносить в отдельную функцию иначе будет всегда происходит создание новой функции и вызов этого коллбека (причем дважды) после каждого рендера

Используется еще как замена componentDidUpdate (если инлайновая запись в виде ref={input=> this.input = input} ) и как componentDidMount ( если вынести в отдельную функцию ref={this.inputRef} ) в копонентах-функциях. Кстати использовать инлайновую запись ref={input=> this.input = input} это антипаттерн, если не нужен коллбек на componentDidUpdate а просто нужно получить сохранить ссылку на элемент - всегда нужно выносить в отдельную функцию иначе будет всегда происходит создание новой функции и вызов этого коллбека (причем дважды) после каждого рендера

ух ты, спасибо

Посоветуйте хороший сервис для прототипирования и с сеткой бутстрапа

Прям с козырей зашел..

А кастомные атрибуты только через finddomnode set attribute можно поставить

Привет, люди! Обнарулжил такую проблему: componentWillMount() { window.addEventListener('click', this.handleClick, false); } componentWillUnmount() { window.removeEventListener('click', this.handleClick, false); } handleClick = (event: any) => { const isInside = ReactDOM.findDOMNode(this).contains(event.target); console.log(isInside); }; Если клик состоялся на диве, на котором навешен какой-то хэндлер, то консоль будет говорить false. Не смотря на то, что этот кликнутый див находится внутри текущего компонента.

А использование двух реактдом рэндеров на странице это нормально?

Да

Ну у меня получается на странице я буду в разных местах рэндерить 2 компонента, а общаться между собой они будут с помощью редакса?

Привет. Можете сделать code review для React spa?Буду признателень за критику. Github: https://github.com/Khangeldy/khangeldy.github.io/tree/master

Ты бы сделал pull request, чтобы комментировать можно было

делал кто-нить breadcrumb с реакт-роутер 4 ?

У меня коллизия имён CSS-склассов в двух разных компонентах: :local { .field { display: block; } } и :local { .field { width: 23%; height: 38px; } } Оба превращаются в ._34sOuK5uvXVI6zHcSe6xH2. Конфиг лоадера вебпак: loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'css-loader!postcss-loader!less-loader', }),

Что здесь не так?

Зачем local?

Ну, чтобы уникальное имя было же?

https://github.com/webpack-contrib/css-loader

Почему просто не использовать css модули с less?

Без local

так можно же включить модули при описании лоадера

все так