檢測子組件是否在React.js中有特定的混合/方法

在我的組件的渲染方法中，我需要通過props.children變量進行過濾，查找具有特定方法或屬性的組件，但我無法公開任何方法或屬性對孩子。我希望從mixin繼承該方法。檢測子組件是否在React.js中有特定的混合/方法

例子：

var barMixin = { 
    isBar: function() { return true; } 
}; 

var Foo = React.createClass({ 
    render: function() { 
     var filteredChildren = this.props.children.filter(function(child) { 
      return child.isBar(); 
     }); 
     return (
      <div> 
       {filteredChildren} 
      </div> 
     ); 
    } 
});

不幸的是，這個例子不起作用，因爲child.isBar是undefined即使子組件繼承混入barMixin。

有什麼我誤解？我也試過聲明我的mixin方法是這樣靜態的：

var barMixin = { 
    statics: { 
     isBar: function() { return true; } 
    } 
};

任何幫助將不勝感激。

編輯：

我已經找到了工作液：

var barMixin = { 
    getDefaultProps: function() { 
     return { 
      isBar: function() { return true; } 
     }; 
    } 
};

檢查與渲染功能：child.props.isBar()。但是，這似乎不是正確的方式來做到這一點。

來源

2014-11-04 SimpleJ

爲什麼要創建一個函數'isBar（）'而不是'isBar：true'？ – 2014-11-04 19:52:37

我想你從錯誤的角度看待它（只是猜測）。查看父母的狀態以決定是否應該呈現孩子。 – lpiepiora 2014-11-04 20:10:37

是的，你不應該這樣做。將道具從父母傳遞給孩子，以確定孩子應該如何渲染，或者讓父母決定渲染哪個組件。 – 2014-11-04 21:41:38

-1

TL; DR如果你的問題是根據訪問兒童的混入，那麼不用看了，我可能誤解了你的問題:(否則，大約混入低一些事情......

你應該堅持使用mixin的原始形式，我認爲使用mixin的最佳用例是代碼共享，所以我假設你在你的代碼中使用了一些模塊系統來要求mixin。如果是這樣，你可以使用它像：

var Foo = React.createClass({ 
    mixins: [fooMixin], 
    render: function() { 
     console.log(this.isBar()); // using the mixin 
     return (
      <div> 
       Something 
      </div> 
     ); 
    } 
});

我創建了一個示例來演示使用

define('fooMixin', { 
 

 
    isBar: function() { 
 
    return 'Something'; 
 
    } 
 

 
}); 
 

 

 
require(['fooMixin'], function(fooMixin) { 
 

 
    var Foo = React.createClass({ 
 

 
    mixins: [fooMixin], 
 

 
    render: function() { 
 
     
 
     var div = React.createFactory('div'); 
 

 
     return div(null, this.isBar()); 
 

 
    } 
 
    }); 
 

 
    React.render(Foo(), document.getElementById('content')); 
 

 
});

<script src="http://fb.me/react-with-addons-0.12.0.js"></script> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.15/require.min.js"></script> 
 
<div id="content"></div>

而且樣品可以的jsfiddle可以看出與JSX - >http://jsfiddle.net/8hby56sa/

希望它能幫助。

來源

2014-11-04 23:25:01

除非我錯過了某些東西，否則這不會回答這個問題。 – FakeRainBrigand 2014-11-05 18:11:59

是的，我在編輯中指出了它。 – 2014-11-05 20:21:31

我已經制作了一個小型圖書館來處理可能適合您的問題的兒童結構。如果你需要，你甚至可以和深度的孩子打交道。你可以在這裏找到它：https://github.com/fernandopasik/react-children-utilities。

import React from 'react'; 
import Children from 'react-children-utilities'; 

function isBar(child) { return true; } 

function Foo(props) { 
    return <div>{Children(this.props.children).filter(isBar)}</div>; 
};

來源

2017-05-09 08:40:44 fernandopasik

檢測子組件是否在React.js中有特定的混合/方法

回答

相關問題