Ребят, всем привет. Возможно кто то сталкивался с таким паттерном: мне нужно пробросить во враппер компонента любые возможные синтетические обработчики реакта. Т.е. В контейнере я определяю функцию onClckCapture, передаю его как непредусмотренный атрибут компоненту. Но так как в дочернем компоненте во враппере он не предусмотрен и не вызывается,он работать не будет. но мне хотелось бы полностью управлять поведением компонента. {...this.props} в div враппер компонента использовать нельзя, так как оттуда может подтянуться всякая дичь. Фильтровать пропсы тоже. Как такое провернуть используя методы из реакт «коробки»?.

Самому інтересно, можно попробивать через контекст или редакс стор

Но точно нескаду мож ребята пробивали

Ребят, всем привет. Возможно кто то сталкивался с таким паттерном: мне нужно пробросить во враппер компонента любые возможные синтетические обработчики реакта. Т.е. В контейнере я определяю функцию onClckCapture, передаю его как непредусмотренный атрибут компоненту. Но так как в дочернем компоненте во враппере он не предусмотрен и не вызывается,он работать не будет. но мне хотелось бы полностью управлять поведением компонента. {...this.props} в div враппер компонента использовать нельзя, так как оттуда может подтянуться всякая дичь. Фильтровать пропсы тоже. Как такое провернуть используя методы из реакт «коробки»?.

обработчики засунуть в один объект, а в компоненете {...this.props.wrapperHandlers}

Гайз, есть идеи как менять куки экспресса при изменении стейта?

обработчики засунуть в один объект, а в компоненете {...this.props.wrapperHandlers}

Такой способ тоже не подходит. Так как мне нужно такое поведение для всех компонентов, а в таком случае нужно будет этот враппеер хэндлерс передавать в каждый компонент и делать спреад оператор внутри контейнера. Мой руководитель не согласиться. Он сейчас то полностью изолирует поведение компонентов, но из за этого теряешься огромные возможности управления ими.

Такой способ тоже не подходит. Так как мне нужно такое поведение для всех компонентов, а в таком случае нужно будет этот враппеер хэндлерс передавать в каждый компонент и делать спреад оператор внутри контейнера. Мой руководитель не согласиться. Он сейчас то полностью изолирует поведение компонентов, но из за этого теряешься огромные возможности управления ими.

а какие возможности теряются?

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

а какие возможности теряются?

Анимация, проброс дата-атрибутов, возможность получишься реф враппера а не компонента.

И назначить на враппер обработчики клавиатуры, мышки и т.д.

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

No 'Access-Control-Allow-Origin' header is present on the requested resource.

как можно решить?

в create-react-app делаю запрос через axios

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

Он это и так делает. Все что я хочу так это найти альтернативу спреад оператора на враппере компонента, чтобы он навешивал обработчики вида onClick, onMouseDown, onMouseUp и так далее на себя, если они есть в пропсах.

тогда только фильтр

Возможно через прокси объект.

Ну вот фильтр тоже не подходит.

No 'Access-Control-Allow-Origin' header is present on the requested resource.

Есть вероятность, что сервер не поддерживает cors

Возможно как то в пропс children children навесить конкретный обработчик?

Есть вероятность, что сервер не поддерживает cors

Cors, это кросс доменное обращение ?

Что-то вроде того

Но эта ж тема как то решается?

как можно решить?

Добавить заголовок на сервере

Добавить заголовок на сервере

У меня есть ссыль с json, которую нужно распарсить

Нет доступа к серверу

По-моему я нашёл выход. Интересно кому?

По-моему я нашёл выход. Интересно кому?

Да

Если я не ошибаюсь при деструктуризации объекта возможно использовать рест оператор и вот его во враппер и прокидывать {...restProos}

Только до раб компа дошёл. Сейчас проверю теорию.

Да, все работает. Т.е. при деструктуризации после всех полей обьекта, нужно ставить ...rest (как угодно можно назвать) и уже прокидывать в контйнер <div {...rest} >

Так а при прикидывании реста, ты как обезопасишь себя от лишнего в компоненте?

Так а при прикидывании реста, ты как обезопасишь себя от лишнего в компоненте?

В recompose есть хок чтобы убрать лишнее

Ну там наверное указываешь что тебе нужно, а это мало чем отличается от обычного прокидывания пропсами, не?

Так а при прикидывании реста, ты как обезопасишь себя от лишнего в компоненте?

Что именно? Store? history, match и прочие пропсы? Я делаю компонент а не контейнер, и только контейнер контролирует что именно передавать в компоненты. Это исключает вероятность передачи в рест всякого дерьма.

Да, все работает. Т.е. при деструктуризации после всех полей обьекта, нужно ставить ...rest (как угодно можно назвать) и уже прокидывать в контйнер <div {...rest} >

это самая херовая идея, какую только можно придумать

это самая херовая идея, какую только можно придумать

Интересно мнение послушать почему

ты даже не представляешь себе как сложно потом поддерживать такой код, когда твой коллега так чудит, прокидывая пропсы через 3-5 уровней используя ...rest

ты даже не представляешь себе как сложно потом поддерживать такой код, когда твой коллега так чудит, прокидывая пропсы через 3-5 уровней используя ...rest

через какие 3-5 уровней?

Интересно мнение послушать почему

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

через какие 3-5 уровней?

имеется в виду <Component {...props} /> внутри этого Component рендерится еще <Component2 {...props} /> и т.д.

<Component text="123' onClick={console.log} /> внутри компонента const {text, ...rest} = this.props и в контейнер <div {...rest}> {text} </div>

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

<Component text="123' onClick={console.log} /> внутри компонента const {text, ...rest} = this.props и в контейнер <div {...rest}> {text} </div>

лучше делать все очевидно, без рестов

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

исключение - либы, например компонент типа TextInput но в этих случаях обычно речь не идет о многоуровневых вложенностях

лучше делать все очевидно, без рестов

Удваиваю, поддерживать ...rest - то ещё повидло

ты даже не представляешь себе как сложно потом поддерживать такой код, когда твой коллега так чудит, прокидывая пропсы через 3-5 уровней используя ...rest

особенно без типов

явное лучше неявного

поэтому все эти ...rest по миниимуму должны быть

Какие пропсы явно переносяться, за это в нашем проекте отвечает flow. Мне же нужен контроль над самими компонентами, чтобы я мог делать, например cloneElement.only(children, {onClickCapture: this.showNotification}); как обертку над компонентом, без ломания верстки и внутри оборачиваемого ребенка можно было управлять теми же событиями.

ну я вот в проекте текущем с этими рестами столкнулся плотно... человек, который это "подарил" проекту ушел и теперь все это волшебство так сильно тормозит развитие, что просто не передать

Пока я не увидел минусов. Только если реально ...rest прокидывать как безумная обезьяна во все дочерние компоненты

Пока я не увидел минусов. Только если реально ...rest прокидывать как безумная обезьяна во все дочерние компоненты

а ты и не увидишь, т.к. это ты пишешь и ты помнишь и знаешь что там

Пока я не увидел минусов. Только если реально ...rest прокидывать как безумная обезьяна во все дочерние компоненты

лучше либо явно указывать все пропсы, либо использовать unstated/context provider https://github.com/jamiebuilds/unstated

Пока я не увидел минусов. Только если реально ...rest прокидывать как безумная обезьяна во все дочерние компоненты

А ты и не увидишь, те, кто после тебя придут - они увидят скорее всего)

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

Я, наверно, не корректно довел мысль. Я понимаю о чем вы говорите, но мне нужно управление враппером компонента, а именно event handlers, другие пропсы, контексты и прочие атрибуты передаваться не будут и отслеживать этого не составит труда с возможностями IDE.

Я, наверно, не корректно довел мысль. Я понимаю о чем вы говорите, но мне нужно управление враппером компонента, а именно event handlers, другие пропсы, контексты и прочие атрибуты передаваться не будут и отслеживать этого не составит труда с возможностями IDE.

если hoc, то можешь передать. если просто компонент, то лучше так не делать

ERROR: S client not available

Хок будет работать для всего компонента, а если делается несколько экземпляров, для некоторых из них нужно сделать preventDefault.

сидел неделю кодил со стартера с Next.js, mobx-state-tree и next-router. Сегодня пошел искать новый стартер, после того как аппа начала рендериться по 2 раза, где на 2й рендер пропадает appStore из пропсов

ок, переписал компонент страницы как pure, баг пропал. Не знаю что это было. Зато поспал хорошо

Не знаю что это было ?

Хмммм что ж это могло быть, например пропсы 2 раза приходили

Ребята, где там группа по вебшторму (прости, господи)? Или может кто-то может подсказать, как настроить там Prettier с eslintIntegration?

Ребята, где там группа по вебшторму (прости, господи)? Или может кто-то может подсказать, как настроить там Prettier с eslintIntegration?

@ide_ru если память не изменяет

@ide_ru если память не изменяет

Спасибо!

Добрый день, пытаюсь настроить чтоб сборка реакт работала по туториалу https://medium.com/bucharestjs/upgrading-a-create-react-app-project-to-a-ssr-code-splitting-setup-9da57df2040a запускаю сервер через ноду указывая на файл с содержимым require('ignore-styles'); require('url-loader'); require('file-loader'); require('babel-register')({ ignore: [ /(node_modules)/ ], presets: ['env', 'react-app'], plugins: [ 'syntax-dynamic-import', 'dynamic-import-node', 'react-loadable/babel' ] }); require('./index'); а для оптимизации использую конфиг const webpack = require('webpack'); const path = require('path'); module.exports = { entry: ['./server/index.js'], target: 'node', output: { path: path.resolve(__dirname, 'server'), filename: 'render-server-compiled.js', }, module: { rules: [ { test: /js$/, exclude: /(node_modules)/, loader: 'babel-loader', } ] }, node: { __dirname: true }, plugins: [ new webpack.DefinePlugin({ 'process.env': { 'NODE_ENV': JSON.stringify('production') } }) ] } конфиг использует .babelrc { "presets": [ ["env", {"modules": false, "targets": {"node": "current"}}], "react-app" ], "ignore": ["/(node_modules)/"], "plugins": [ "syntax-dynamic-import", "dynamic-import-node", "react-loadable/babel" ] } получаю в итоге ошибку```UnhandledPromiseRejectionWarning: Error: Cannot find module 'function () { return require('../components/About'); }'``` где используется const About = Loadable({ loader: () => import('../components/About'), loading: () => <div>loading...</div> }) но вот если запускать через то, что выдаст вебпак, то проблем нет. Может кто подскажет что тут не так ?

Добрый день, пытаюсь настроить чтоб сборка реакт работала по туториалу https://medium.com/bucharestjs/upgrading-a-create-react-app-project-to-a-ssr-code-splitting-setup-9da57df2040a запускаю сервер через ноду указывая на файл с содержимым require('ignore-styles'); require('url-loader'); require('file-loader'); require('babel-register')({ ignore: [ /(node_modules)/ ], presets: ['env', 'react-app'], plugins: [ 'syntax-dynamic-import', 'dynamic-import-node', 'react-loadable/babel' ] }); require('./index'); а для оптимизации использую конфиг const webpack = require('webpack'); const path = require('path'); module.exports = { entry: ['./server/index.js'], target: 'node', output: { path: path.resolve(__dirname, 'server'), filename: 'render-server-compiled.js', }, module: { rules: [ { test: /js$/, exclude: /(node_modules)/, loader: 'babel-loader', } ] }, node: { __dirname: true }, plugins: [ new webpack.DefinePlugin({ 'process.env': { 'NODE_ENV': JSON.stringify('production') } }) ] } конфиг использует .babelrc { "presets": [ ["env", {"modules": false, "targets": {"node": "current"}}], "react-app" ], "ignore": ["/(node_modules)/"], "plugins": [ "syntax-dynamic-import", "dynamic-import-node", "react-loadable/babel" ] } получаю в итоге ошибку```UnhandledPromiseRejectionWarning: Error: Cannot find module 'function () { return require('../components/About'); }'``` где используется const About = Loadable({ loader: () => import('../components/About'), loading: () => <div>loading...</div> }) но вот если запускать через то, что выдаст вебпак, то проблем нет. Может кто подскажет что тут не так ?

@webpack_ru

@webpack_ru

спасиб

Хмммм что ж это могло быть, например пропсы 2 раза приходили

эт понятно, но от чего я так и не узнал

@javascript_jobs

ребят, есть какой то способ поставить минимальный размер файла для выноса в чанк в react-loadable?

ребят, есть какой то способ поставить минимальный размер файла для выноса в чанк в react-loadable?

ты же вручную его оборачиваешь в loadable

да, но хотелось бы, чтобы это автоматом происходило)

чтобы не следить за каждым чанком

это антипаттерн

ты выделяешь в лоаудабл только те, которые заведомо тяжелые

ок, я тебя понял, спасиб

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

из за чего7?

ну в смысле у меня default импорты компонентов, почему появляется эта ошибка?

цитата: “joi + React state == best forms ever”

ну в смысле у меня default импорты компонентов, почему появляется эта ошибка?

а импортируешь как

а импортируешь как

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

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

сделай репродьюс на codesandbox

ну в смысле у меня default импорты компонентов, почему появляется эта ошибка?

у тебя рядом лежат файлы стилей, загружаемые как css-modules?

у тебя рядом лежат файлы стилей, загружаемые как css-modules?

нет