Возможно ли построить массив mixin для компонента React на основе пропеллера?Условные миксины в реактиве?
У меня есть один компонент с опорой, который может принимать одно из двух значений. Исходя из этого, мне нужно принципиально другое поведение от одного из моих миксинов. Я хотел бы разделить этот mixin на два отдельных файла, а не на чудовищные условные утверждения, но я не могу найти простой способ сделать это. Какие-нибудь советы?
Нет, это невозможно. Не зная больше, это звучит так, как будто вы, возможно, захотите изучить идею создания разных компонентов и условно использовать правильный из родителя. Вы можете даже обернуть это и скрыть это от потребителей, если хотите.
Вот чего я надеялся избежать, но это лучший ответ. Для моего случая я не думаю, что мы будем создавать разные компоненты, но, возможно, в будущем рефакторе. Благодарю. – Bonnie
Натурально нет, лучше создавать отдельные компоненты в зависимости от условий. Однако есть сторонний компонент, называемый react-mixin-manager, который может выполнять динамические микшины на основе условий и микшинов, которые принимают параметры. Однако я не использовал его, поэтому я не могу его ручаться, и я не рекомендую его использовать на производственном сайте, но не стесняйтесь играть с этим
Как уже упоминалось, это, вероятно, страшная идея, но в спирте «все возможно», вот оно.
Сначала нам нужно определить интерфейс для тестирования опоры. Это полностью гибко, с удобством по умолчанию.
var hasOwn = Function.prototype.call.bind(Object.prototype.hasOwnProperty);
function testProps(obj, thisArg){
return Object.keys(obj).every(function(propName){
var test = obj[propName], prop = thisArg.props[propName];
if (typeof test === "function"){
return test(prop);
}
else {
return prop === test;
}
});
}
Пример того, что вы хотите пройти это {foo: true, bar: odd} где нечетные возвращает истину, если число нечетное. Когда вызывается с <Component foo={true} bar={7} />, mixin будет «активным».
Используя это, мы можем определить функцию, которая принимает массив {mixin: mixin, condition: tests}, где тесты находятся в вышеупомянутом формате.
function conditionalizeMixins(mixins){
var proxyMixin = {};
var runMixins = function(lifeCycleKey){
return function(){
var component = this, args = arguments;
var result;
mixins.forEach(function(mixin){
if (testProps(mixin.condition, component)) {
result = mixin.mixin[lifeCycleKey].apply(component, args);
}
});
return result;
}
}
mixins.forEach(function(mixin){
Object.keys(mixin.mixin).forEach(function(key){
if (proxyMixin[key]) return;
proxyMixin[key] = runMixins(key);
});
});
return proxyMixin;
}
Теперь мы можем определить наши Примеси так:
mixins: [conditionalizeMixins([
{
mixin: myMixin,
condition: {foo: true, bar: false}
},
{
mixin: myMixin,
condition: {foo: false, num: function(x){return x%2===1}}
}
])]
Смотрите, если есть способ, чтобы разделить это на два компонента, а не один компонент. Вероятно, это лучший способ сделать это.
Заметки о коде выше:
Это выглядит как главный кандидат, чтобы сделать два компонента. Я согласен с тем, что вы не хотите, чтобы в компоненте было много условностей - обычно много условностей вокруг одного или двух значений центральной опоры является хорошим индикатором того, что компонент можно реорганизовать и разделить, чтобы упростить. –
Похоже, что у вас уже есть поддержка: как насчет определения функции, которая определяет компонент с помощью prop в качестве параметра, сначала вычислите список 'mixins' в этом« компоненте, определяющем », затем передайте результаты вашей функции 'react.renderComponent'? Например. 'Реагировать.renderComponent (componentDefiningFunc (prop), yourTarget) ' –