將值賦予div獨有的變量，並將變量傳遞給組件函數In React

Question

以下是在Meteor.js上運行的React.Component，因此Session函數是全局函數。

對於每個div內部div#sidebar-wrapper，foo或bar通入方法this.isActive和​​相同的值。

<div 
    className={this.isActive('foo') + " tab-btn"} 
    onClick={this.changeTab.bind(null, 'foo')}> 
    <span className="title">Foo</span> 
</div> 

問題：是否有可能這個值foo或bar到div分配作爲一個變量，該變量傳遞到2個功能是什麼？這個想法是讓代碼更清潔。

import React from 'react'; 

export default class Sidebar extends React.Component { 

    isActive(tabName) { 
     return status = Session.get('currentTab') == tabName ? "active" : ""; 
    } 

    changeTab(tabName) { 
     Session.set('currentTab', tabName); 
    } 

    render() { 
     return (
      <div id="sidebar-wrapper"> 
       <div 
        className={this.isActive('foo') + " tab-btn"} 
        onClick={this.changeTab.bind(null, 'foo')}> 
        <span className="title">Foo</span> 
       </div> 

       <div 
        className={this.isActive('bar') + " tab-btn"} 
        onClick={this.changeTab.bind(null, 'bar')}> 
        <span className="title">Bar</span> 
       </div> 
      </div> 
     ) 
    } 
} 

Answer 1

您可以提取div到自己的可重用的組件，這樣的：

export default class InnerDiv extends React.Component { 

    isActive(tabName) { 
     return status = Session.get('currentTab') == tabName ? "active" : ""; 
    } 

    changeTab(tabName) { 
     Session.set('currentTab', tabName); 
    } 

    render() { 
     var title = this.props.title; 
     var titleLowerCase = title.toLowerCase(); 

     return (
      <div> 
       className={this.isActive(titleLowerCase) + " tab-btn"} 
       onClick={this.changeTab.bind(null, titleLowerCase)}> 
       <span className="title">title</span> 
      </div> 
     ) 
    } 
} 

，然後更改然後Sidebarrender方法的方式清潔劑之一：

render() { 
    return (
     <div id="sidebar-wrapper"> 
      <InnerDiv title="Foo" /> 
      <InnerDiv title="Bar" /> 
     </div> 
    ) 
} 

我冒昧承擔Session變量是全球性的，並沒有問題移動isActive和changeTab功能集成到新組件中。如果這是一個問題，請告訴我，我會提出另一個解決方案。