這陣子寫React的components，常常很快就完成了期待的效果。
但是總覺得沒有重用性、無法從application獨立出來。

我想將元件中可重用的部份獨立出來，成為基本元件，接著針對application另寫元件去擴充這些基本元件。
有辦法讓一個component去繼承另一個component嗎？似乎不行。

我首先在開發React-Lightbox時遇到了上述問題。

我想製作一個Lightbox效果的plugin，提供Lightbox、LightboxTrigger、LightboxModal三個component，讓developer自訂觸發Lightbox的按鈕、Lightbox框框內的內容。

用法類似這樣：

        React.renderComponent(
            
                
                    
                
                
                    
                
            ,                
            document.getElementById('react-canvas')
        );

範例中的ToggleButton跟MyPanel是由developer自訂。

該怎麼達成這個效果呢？

毫無頭緒之下，我寫出像這樣的code：

        for (j in this.props){
            if (j !== 'children'){
                this.props.children.props[j] = this.props[j];                
            }
        }

        for(i in this.props.children){
            this.props.children[i].props.openLightbox = this.openLightbox;
            this.props.children[i].props.closeLightbox = this.closeLightbox;
            this.props.children[i].props.setLightboxState = this.setLightboxState;
            for (j in this.state){
                this.props.children[i].props[j] = this.state[j];                
            }
        }

簡單地說，就是硬著頭皮傳遞某些props、達到類似「繼承」的「擴充」效果。

眼前的問題解決了，但是tomchentw指出這樣寫法的問題所在（感謝指點）：

‘At my first glance it looks pretty magic.’

該怎麼辦呢？

我最後終於在這篇SO的問答找到了一線希望：

Extending React.js components

由component去wrap住基本component來達到擴充的效果，然後利用JSX Spread Attributes的幫助來傳遞props。

利用這些，我開發出了第二個React的plugin：Tag Manager

所謂「使用者自訂component去擴充基本component」的code，大概長這樣：

/** @jsx React.DOM */

var MyCustomTagManager = React.createClass({

    addTagCallback: function(tagName, setStateCallback){
        alert('Add a tag! Maybe you should send an ajax!');
        setStateCallback({id: 99, name: tagName});
    },

    removeTagCallback: function(tag){
        alert('Remove a tag! Maybe you should send an ajax!');
    },

    render: function(){
        return(
            
        )
    }

});            

反省

再看一眼，發現前面的寫法跟後面的寫法其實都是「用component去包住component」，意義上其實類似。
（都是叫composition？我理論沒學好，對專有名詞不熟@@”）

後面的寫法看起來更explicit了，maintainability跟readability應該也更高了吧？
您覺得呢？