Всем привет!

Люди, подскажите пожалуйста как мне react-script-loader в роли миксина использовать в ES6 синтаксисе? var React = require('react'); var ReactScriptLoaderMixin = require('react-script-loader').ReactScriptLoaderMixin; var PaymentForm = React.createClass({ mixins: [ ReactScriptLoaderMixin ], ... render: function() { if (this.state.stripeLoading) { return <div>Loading</div>; } else if (this.state.stripeLoadingError) { return <div>Error</div>; } else { return <div>Loaded!</div>; } } }); module.exports = PaymentForm;

ReactScriptLoaderMixin(PaymentForm) ?

компонентом высшего порядка?

это сработает?

ReactScriptLoaderMixin(PaymentForm) ?

это не работает, потому что ReactScriptLoaderMixin не является компонентом высшего порядка

var ReactScriptLoaderMixin = { componentDidMount: function() { if (typeof this.getScriptURL !== 'function') { throw new Error("ScriptLoaderMixin: Component class must implement getScriptURL().") } ReactScriptLoader.componentDidMount(this.__getScriptLoaderID(), this, this.getScriptURL()); }, componentWillUnmount: function() { ReactScriptLoader.componentWillUnmount(this.__getScriptLoaderID(), this.getScriptURL()); }, __getScriptLoaderID: function() { return 'id' + idCount++; }, };

имплементировать mount/unmount в исходном компоненте и ReactScriptLoaderMixin.fn.call(this)

Object.assign(PaymentForm.prototype, ReactScriptLoaderMixin) тоже сработает. Но только один раз.

имплементировать mount/unmount в исходном компоненте можно чуть подробнее пожалуйста...

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

Как без них жить - в нужных местах дергать напрямую.

componentDidMount и componentWillUnmount в исоходном компоненте, я должен просто вызвать миксин с передачей контекста?

Если в миксине миксуются mount/unmount - значит эти функции надо описать у себя, и из них дернуть функции миксина.

попробую

спасибо

Можно попробовать найти готовую поделку которая подружит класс с миксинами в es6 реализации. Там реально просто прототип пнуть и готово

Ага, так и прийдется, так как еще __getScriptLoaderID надо запинуть не забыть. Они его не правильно сделали

понял ))

пипец там ещё и idCount глобальная переменная

мне её получается в state исходного компонента держать?

Как вы реализуете сложные компоненты типа таблицы, где вам нужно конфигурировать хедер, футер, фильтр, пагинацию и само тело?

Пропс?

Как вы реализуете сложные компоненты типа таблицы, где вам нужно конфигурировать хедер, футер, фильтр, пагинацию и само тело?

Выношу в рендереры

И задаю пропсами

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

src/components/pagination/Pagination.jsx · master · Mikhail Tsyplakov / heaven-hr-assignment · GitLab https://gitlab.com/jaybekster/heaven-hr-assignment/blob/master/src/components/pagination/Pagination.jsx

Я так делал. Вроде годно

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

Разверни "если" плиз

есть компонент таблица состоящий их дефолтных Header, Footer, Body компонентов. Ты может помеять Header на SmartHeader, тоже самое с остальными

есть компонент таблица состоящий их дефолтных Header, Footer, Body компонентов. Ты может помеять Header на SmartHeader, тоже самое с остальными

this.props.headerRenderer(data)

В дефолт пропсах устанавливаешь обычный хедер

есть компонент таблица состоящий их дефолтных Header, Footer, Body компонентов. Ты может помеять Header на SmartHeader, тоже самое с остальными

Классы через пропсы или HOC

Посмотри в доке по реакт есть пример

ну т.е. типа <Table header={{class: SmartHeader}} ... /> ?

https://facebook.github.io/react/docs/composition-vs-inheritance.html

Курим ман)

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

точнее рендим другой компонент

в зависимости от состояния

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

Контейнер сделай

У тебя таких таблиц сколько?

хватает

Хватает не ответ. Сам компонент таблицы за что отвечать должен?

В таком случае

Если рендеринг отдельно всего

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

компонент - это ещё и поведение

Вы там вдвоём?)

вообще все сложнее гораздо. есть ItemsProvider, поставляющий данные. Есть какой-то темплейт, который можно указать и он будет его рендерить и пропихивать данные в этот темплейт, как пример был таблица

Короче

я все это реализовал уже и мне просто стало интересно как сделали другие, hoc мне не подошел, с пробросом children я не помню, но тоже какие-то проблемы были

<parent><item1/><item2/></parent>

Если тебе только инжектить данные нужно

В рендере итерация по чайлдам

И инжект

Не?

Но если у тебя структура не плоская внутри не подойдёт (

http://pastebin.com/H5tguUpE мне кажется по такому будет тяжело пробежаться или по такому пробежишь?

Но если у тебя структура не плоская внутри не подойдёт (

ну да

ну да

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

ну т.е. типа <Table header={{class: SmartHeader}} ... /> ?

из-за чего я выбрал этот способ

ERROR: S client not available

Чот дохера сложно

Я бы сделал таки разные компоненты таблиц с одним интерфейсом)

эм, ну тогда лишишься компонуемости и весь профит в переиспользовании уйдет

Но опять же код твой не вижу

Вижу

Но опять же код твой не вижу

не понял

Испарил опечатку

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

есть компонент таблица состоящий их дефолтных Header, Footer, Body компонентов. Ты может помеять Header на SmartHeader, тоже самое с остальными

Есть два подхода к реализации таблиц в react, их можно посмотреть здесь: https://github.com/bvaughn/react-virtualized https://github.com/tannerlinsley/react-table Мне ближе второй вариант, но мы используем входными данными: data - источник данных в виде map id => doc order - порядок сортировки данных columns - парметры столбцов, accessors, renders по аналогии с react-table

Есть два подхода к реализации таблиц в react, их можно посмотреть здесь: https://github.com/bvaughn/react-virtualized https://github.com/tannerlinsley/react-table Мне ближе второй вариант, но мы используем входными данными: data - источник данных в виде map id => doc order - порядок сортировки данных columns - парметры столбцов, accessors, renders по аналогии с react-table

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

Ну наконец-то на мир посмотрел

баньте шаболду

баньте шаболду

+

Вай вай вай какие картинки!

первый раз спам вынудил меня подписаться)

вот так и теряются бойцы невидимого фронта

?

погодите. бан только после предупреждения, вы нарушаете правила баня без предупреждения :)

погодите. бан только после предупреждения, вы нарушаете правила баня без предупреждения :)

надо забанить их без предупреждения