Question

是否可以基于prop？

为React组件构建mixin数组

我有一个带有道具的组件可能会采用两个值中的一个。基于此，我需要与我的一个mixin完全不同的行为。我想将这个mixin分成两个单独的文件，而不是在任何地方都有可怕的条件语句，但我找不到一个简单的方法来做到这一点。有什么提示吗？

Answer 1

不，这是不可能的。在不知情的情况下，听起来您可能想要探索创建不同组件的想法，并有条件地使用父组件中的正确组件。如果你愿意的话，你甚至可以将其包装起来并将其隐藏起来。

Answer 2

正如其他人所提到的，这可能是一个可怕的想法，但是在这个问题上，任何事都有可能＆＃34;，这就是它。

首先，我们需要定义一个用于测试道具的界面。它完全灵活，方便默认。

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}，如果数字是奇数，则奇数返回true。使用<Component foo={true} bar={7} />调用时，mixin将处于活动状态＆＃39;。

使用它，我们可以定义一个函数，该函数采用{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：

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

看看是否有办法将其拆分为两个组件，而不是单个组件。这可能是解决这个问题的最好方法。

关于上述代码的说明：

性能不是很好，但可以优化
如果多个条件mixin定义，例如getInitialState，则仅使用最后一个活动的
它隐藏了错误，例如如果您定义了返回字符串的doFoo，并且没有一个mixin处于活动状态，那么它将默认返回undefined

jsbin

Answer 3

本地不，最好根据条件构建单独的组件。但是，有一个名为react-mixin-manager的第三方组件可以根据条件和接受参数的mixin进行动态混合。但是我没有使用它，所以我不能保证它，我不建议在生产网站上使用它，但随意玩它

React中的条件混合？

3 个答案: