Hỗn hợp có điều kiện trong React?

Question

Có thể xây dựng mảng mixin cho một thành phần React dựa trên bộ phận chống đỡ không?

Tôi có một thành phần có giá đỡ có thể lấy một trong hai giá trị. Dựa trên điều này, tôi cần hành vi hoàn toàn khác với một trong các mixin của tôi. Tôi muốn tách hỗn hợp này thành hai tệp riêng biệt thay vì có các câu lệnh có điều kiện quái dị ở khắp mọi nơi, nhưng tôi không thể tìm thấy cách dễ dàng để làm điều này. Có lời khuyên nào không?

Answer 1

Không, không thể. Nếu không biết nữa, có vẻ như bạn có thể muốn khám phá ý tưởng tạo các thành phần khác nhau và có điều kiện bằng cách sử dụng một thành phần phù hợp từ cha mẹ. Bạn thậm chí có thể quấn này lên và giấu nó từ người tiêu dùng nếu bạn muốn.

Answer 2

Thực sự không, tốt hơn là xây dựng các thành phần riêng biệt tùy thuộc vào điều kiện. Tuy nhiên, có một thành phần bên thứ 3 được gọi là react-mixin-manager có thể làm các mixin động dựa trên các điều kiện và các mixin chấp nhận các tham số. Tuy nhiên tôi đã không sử dụng nó, vì vậy tôi có thể không thực sự xác minh nó và tôi không khuyên bạn nên sử dụng nó trên một trang web sản xuất, nhưng cảm thấy tự do để chơi xung quanh với

Answer 3

Như đã đề cập bởi những người khác, điều này có lẽ là một ý tưởng khủng khiếp, nhưng trong châm ngòi của "bất cứ điều gì là có thể", ở đây nó đi.

Trước tiên, chúng tôi cần xác định giao diện để thử nghiệm giá đỡ. Nó hoàn toàn linh hoạt, với một mặc định thuận tiện.

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

Một ví dụ về những gì bạn muốn vượt qua đó là {foo: true, bar: odd} lợi nhuận nơi lẻ đúng nếu một số là số lẻ. Khi được gọi với <Component foo={true} bar={7} /> mixin sẽ là 'hoạt động'.

Sử dụng điều đó, chúng tôi có thể xác định hàm có một mảng là {mixin: mixin, condition: tests}, trong đó các thử nghiệm có định dạng nói trên.

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

Bây giờ chúng ta có thể xác định mixins của chúng tôi như sau:

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

Xem nếu có một cách để chia thành hai thành phần, chứ không phải là một thành phần duy nhất. Đó có thể là cách tốt nhất để giải quyết vấn đề này.

Thuyết minh về đoạn code trên:

• hiệu suất là không lớn, nhưng có thể được tối ưu hóa
• nếu nhiều mixins có điều kiện xác định, ví dụ như, getInitialState, chỉ có một hoạt động cuối cùng được sử dụng
• nó ẩn lỗi, vd nếu bạn xác định doFoo mà trả về một chuỗi, và không ai trong số các mixins đang hoạt động, nó sẽ âm thầm trở lại không xác định

jsbin