React의 조건부 믹스?

Question

소품을 기반으로 한 React 구성 요소의 mixin 배열을 만들 수 있습니까?

나는 두 가지 값 중 하나를 취할 수있는 받침대가있는 구성 요소가 하나 있습니다. 이것을 바탕으로, 나는 나의 mixins 중 하나에서 근본적으로 다른 행동이 필요합니다. 이 믹스 인을 사방에 괴물 같은 조건문을 쓰는 것보다 두 개의 별개의 파일로 분리하고 싶습니다. 그러나 이것을 쉽게 할 수있는 방법을 찾을 수 없습니다. 어떤 팁?

Answer 1

아니요, 불가능합니다. 더 이상 알지 못한다면 다른 구성 요소를 작성하고 조건부로 부모의 올바른 구성 요소를 사용하는 아이디어를 탐색하려는 것일 수 있습니다. 원하는 경우이를 포장하여 소비자로부터 숨길 수도 있습니다.

Answer 2

기본적으로 조건에 따라 별도의 구성 요소를 만드는 것이 좋습니다. 그러나 react-mixin-manager이라는 타사 구성 요소가 있으며 매개 변수를 허용하는 조건 및 믹스 인을 기반으로 동적 믹스를 수행 할 수 있습니다. 그러나 나는 그것을 사용하지 않았기 때문에 그것을 정말로 보증 할 수는 없으며 제작 현장에서 사용하는 것을 권장하지 않지만 그것으로 놀아도 좋다.

Answer 3

다른 사람들이 언급했듯이, 아마도 이것은 아마도 끔찍한 생각이지만, "무엇이든 가능하다"는 말은 여기있다.

먼저 우리는 소품을 테스트하기위한 인터페이스를 정의해야합니다. 편리한 기본 설정으로 완벽하게 유연하게 사용할 수 있습니다.

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, 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; 
} 

이제 우리는과 같이 우리의 유지 mixin을 정의 할 수 있습니다 : 오히려 단일 구성 요소보다 두 가지 구성 요소로이 분할 할 수있는 방법이 있는지

mixins: [conditionalizeMixins([ 
    { 
     mixin: myMixin, 
     condition: {foo: true, bar: false} 
    }, 
    { 
     mixin: myMixin, 
     condition: {foo: false, num: function(x){return x%2===1}} 
    } 
    ])] 

을 참조하십시오. 이것이 가능한 가장 좋은 방법입니다. 위의 코드에 대한

주 :

• 성능이 좋은 것이 아니라 최적화 할 수
여러 조건이나 mixin 정의 경우, 예를 들어, getInitialState는 마지막 활성 하나가 사용됩니다
• 을 오류를 숨 깁니다. 당신이 문자열을 반환하고, 유지 mixin 것도이 활성화되어 있지 doFoo를 정의하면, 그것은 자동으로

jsbin