Кстати, а что кто может порекомендовать про “тестирование для чайников” в 2018 году?

const onClick =(text, e)={ this.props.handleOnClick(text, e) } render() { const { text, value } = this.state; return (<div> <LessState text={this.state.less.text} value={this.state.less.value} onClick={this.onClick(text)} />

я так и делал, но 1) зачем так писать если LessState не extends React.PureComponent ? 2) как что то похожее делать если компонент StateLess 3) не совсем понимаю зачем реселеторы если без PureComponents они ничем не помогут?

Кстати, а что кто может порекомендовать про “тестирование для чайников” в 2018 году?

У Реакт без воды вроде по тестированию чета вышло

Доброго времени суток, есть проблема, как-нибудь можно в реакт, рендерить таблицу xml на основе xslt схемы для неё?

Maxim это чат не для вакансий, читайте описание

Кстати, а что кто может порекомендовать про “тестирование для чайников” в 2018 году?

cypress.io

Думаешь с него начинать надо?

Cypress очень крутой

Знаю, сами он него премся, но я больше про “узичить Jest за 5 дней"

cypress.io

Не взлетел по ходу

Я про него ещё несколько лет назад услышал

cypress.io

Это же для функциональных?

Это же для функциональных?

да а зач что-то еще?

Там всё сразу было же?

кстатим вроде да, дофига всего

да а зач что-то еще?

хз функциональные для тестировщиков же?

юнит для разраба например

да а зач что-то еще?

Например потому, что без юнитов функциональные не покажут всей картины? ?

Или ты заебешься вусмерть их писать

Количество кейсов для функ тестов в отсутствие юнитов будет расти на порядки с каждым новым компонентом

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

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

В каком плане грузить по имени?

не держать 1 файл с описанием всех svg. а кучку маленьких с конкретным svg

Если у тебя есть там какой-то экспорт можно написать index.js из которого можно экспортировать данные из маленьких файлов типа export { default as lolSvg } from ‘./lolSvg’;

тогда не работает модификация svg по цвету

ЧТо значит модификация по цвету? не совсем понимаю

ЧТо значит модификация по цвету? не совсем понимаю

изменять цвет у свг

сделать svg lheujuj wdtnf

другого цвета

Ну у тебя props.color по идее должен быть

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

Вот и я про тоже

Скажите пожалуйста, как поменять порядок подключения styles в head, я подключаю reboot, потом injectGlobal (SC), а в head они находятся в другом порядке :|

у тебя должен быть компонент Icon в который импортишь import * as icons from ‘./icons’; и в Icon предаешь name, color. Иконки достаешь как icons[props.name]

почитайте про svg, там так цвет не поменяешьб у него есть внутреннее свойство fill

у тебя должен быть компонент Icon в который импортишь import * as icons from ‘./icons’; и в Icon предаешь name, color. Иконки достаешь как icons[props.name]

Он скорее имеет ввиду, поменять fill в определенном месте у свг

Не взлетел по ходу

Да вроде взлетел, на него толпами переходят

тогда не работает модификация svg по цвету

Можно красить их средствами css

Ага

У тебя стили как организованы?

Навернякак bem-naming - пилишь модификаторы и красишь

styled-components

почитайте про svg, там так цвет не поменяешьб у него есть внутреннее свойство fill

Мы в курсе

на крайняк lolSvg.js должен экспортить функцию которая принимает color и там модифицируй че-нибудь

Берёшь и меняешь филл через пропсы

http://nicolasgallagher.com/making-svg-icon-libraries-for-react-apps/

Вот эту штуку почитай

может отркроешь истину для себя

http://nicolasgallagher.com/making-svg-icon-libraries-for-react-apps/

Фигня какая-то

Обоснуй?

если иметь доступ к fill у svg. svg должен быть прописан в компоненте как <svg>.....</svg> .но тогда нельзя экспортнуть конкретный svg из файла( он прилетит уже сосвоим заданным внутри него fill)

Ну так а как ты хочешь подругому?

Не читал тред. Писал динамический конфигуратор товара на свг-масках, понравилось. А в чем вопрос?

http://nicolasgallagher.com/making-svg-icon-libraries-for-react-apps/

так и было сделано, но тимлид решил что повторения кода большое , так как разное в компоненте иконка только строка <g><path d='...'></g>

Ну так там вызов функции, которая возвращает компонент, повторения не так уж и много

В плане SVG есть две крайности - SVG как внешний файл (image) - SVG как react компонент В случае “реакт компонента” - или “нормальный комнонент” или dangerouslySetHTML, так как быстрее малек. В обоих случаях выше - или inplace компонент, те “обычный” или импорт через “symbol”, а сам “компонент” можно вынести в атлас В обоих случаях выше (всезде кроме image) - стили из одного SVG текут в другой, и надо не забывать или префикс SVGO плагин запускать, или изолировать Изолировать можно различными способами, и все они немного замедляют рендер. В общем все сложно, и сликшом много вариантов

На крайняк можешь спрайт запилить

если иметь доступ к fill у svg. svg должен быть прописан в компоненте как <svg>.....</svg> .но тогда нельзя экспортнуть конкретный svg из файла( он прилетит уже сосвоим заданным внутри него fill)

Любому SVG можно задавать два цвета, доступные через чистый CSS https://css-tricks.com/lodge/svg/21-get-two-colors-use/

Я полгода назад запили маленькую библиотечку, чтобы по разному SVG в реакте насиловать. Совершенно не понимаю зачем, так как с тех пор ниразу и не использовал. Но для случае с “библиотекой” иконок может быть удобна https://github.com/theKashey/react-svg-atlas

ERROR: S client not available

Привет. Ребята, подскажите пожалуйста как react router предотвратить переход по активной ссылке? Те я нахожусь на странице юзер, кликаб ещё раз ссылку перехода на юзер, и у меня это считается как переход, те если нажать назад в браузере, то я отсноусть на этой же странице

Привет. Ребята, подскажите пожалуйста как react router предотвратить переход по активной ссылке? Те я нахожусь на странице юзер, кликаб ещё раз ссылку перехода на юзер, и у меня это считается как переход, те если нажать назад в браузере, то я отсноусть на этой же странице

на класс .active добавляешь свойство pointer-events: none;

Я полгода назад запили маленькую библиотечку, чтобы по разному SVG в реакте насиловать. Совершенно не понимаю зачем, так как с тех пор ниразу и не использовал. Но для случае с “библиотекой” иконок может быть удобна https://github.com/theKashey/react-svg-atlas

спс, бум копать

или так <Link activeClassName='yourClassName' /> .yourClassName { pointer-events: none; cursor: default; }

на класс .active добавляешь свойство pointer-events: none;

Спасибо, попробую

bump

Скажите пожалуйста, как поменять порядок подключения styles в head, я подключаю reboot, потом injectGlobal (SC), а в head они находятся в другом порядке :|

спс, бум копать

вот на таком варианте пока остановился , жду реакции лида const Icon = ({ name = 'defaultIcon', color = 'currentColor', size = 24, onClick, ...otherProps }) => { const icon = icons[name] ? icons[name] : icons['defaultIcon']; return ( <Svg onClick={onClick} x="0px" y="0px" width={size} height={size} viewBox={icon.viewBox} fill={color} {...otherProps} > {[...icon.path]} </Svg> ); };

тогда не работает модификация svg по цвету

svgr

svgr

спс ,классный автоматизатор, но от такой формы компонента отказались

по причине?

по причине?

повторения кода большое , так как разное в компоненте иконка только строка <g><path d='...'></g>

ниче не понял, где повторение...берет твою же svg и превращет в компонент, о каких повторениях речь?

А как вы хотите разные иконки сделать без повторения?

<svg></svg> тоже повторение))

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

че то я не одупляю все равно проблемы)) у svgr есть лоадер для вебпака, есть у нас одна svg icon, сделай свой компонент который прокидывает в эту svg любые пропсы такие какие ты хочешь сам

один физический svg в бандле

если тебе нужно составные path менять, дроби svg свою на составные части, далее пляшешь от viewBox так как хочешь и компонуешь то, что хочешь

1 компонент Icon, и он по имени рисует иконку, если делать require() то приходит готовая иконка у которой цвет не меняется уже

есть компонент Icon, в нем ты реквайришь все иконки что по имени через svgr-loader, отсылаешь в Icon пропсом имя, рендеришь

с пропсами нужными

1 компонент Icon, и он по имени рисует иконку, если делать require() то приходит готовая иконка у которой цвет не меняется уже

А что у тебя в объекте icons?

Ну так тебе надо обертку в виде компонента над svg делать

подргому никак

const SvgComponent = props => ( <svg width="1em" height="1em" viewBox="0 0 48 1" {...props}> <path d="M0 0h48v1H0z" fill="currentColor" fillRule="evenodd" /> </svg> )

Это из примеров svgr

А что у тебя в объекте icons?

import React from 'react'; export const icons = { defaultIcon: { viewBox: '0 0 24 24', path: [ <path key={'defaultIcon'} d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" /> ] }, Add: { viewBox: '0 0 24 24', path: [<path key={'Add'} d="M19,13h-6v6h-2v-6H5v-2h6V5h2v6h6V13z" />] },