將類組件（本地狀態）轉換爲無狀態的功能組件和容器

Question

我是react-redux的新成員，目前正在開發一個項目，我們的軟件體系結構團隊要求將所有組件編寫爲無狀態功能組件在React 0.14中介紹），並且每當我們需要傳遞一個redux狀態時，我們都應該使用容器。

我的問題是： 這種模式適用於每個組件，以及如何？即使對於具有自己的「狀態」（不是redux狀態）的基於類的組件？是否有可能將所有類組件重寫爲無狀態功能組件和容器？

我要求的原因實際上是更具體： 該團隊已決定使用reactstrap-tabs來實現我們的組件內部標籤功能。這些選項卡將存在於父組件內，並且在每個選項卡內將顯示不同的子組件。從文檔看來，父級標籤組件應該實現爲基於類的組件（處理this.state）。是否有可能將其重寫爲無狀態功能組件和容器？

任何幫助將非常感激，因爲我堅持這一點。下面是示例代碼...

import React from 'react'; 
import { TabContent, TabPane, Nav, NavItem, NavLink, Card, Button, CardTitle, CardText, Row, Col } from 'reactstrap'; 
import classnames from 'classnames'; 
import MyFirstChildComponent from '/components/MyFirstChildComponent'; 
import MySecondChildContainer from '/containers/MySecondChildContainer'; 


export default class TabbedParent extends React.Component { 
    constructor(props) { 
    super(props); 

    this.toggle = this.toggle.bind(this); 
    this.state = { 
     activeTab: '1' 
    }; 
    } 

    toggle(tab) { 
    if (this.state.activeTab !== tab) { 
     this.setState({ 
     activeTab: tab 
     }); 
    } 
    } 

    render() { 
    return (
     <div> 
     <Nav tabs> 
      <NavItem> 
      <NavLink 
       className={classnames({ active: this.state.activeTab === '1' })} 
       onClick={() => { this.toggle('1'); }} 
      > 
       MyFirstTab 
      </NavLink> 
      </NavItem> 
      <NavItem> 
      <NavLink 
       className={classnames({ active: this.state.activeTab === '2' })} 
       onClick={() => { this.toggle('2'); }} 
      > 
       MySecondTab 
      </NavLink> 
      </NavItem> 
     </Nav> 
     <TabContent activeTab={this.state.activeTab}> 
      <TabPane tabId="1"> 
      <Row> 
       <Col sm="12"> 
       <MyFirstChildComponent /> 
       </Col> 
      </Row> 
      </TabPane> 
      <TabPane tabId="2"> 
      <Row> 
       <Col sm="6"> 
       <MySecondChildContainer /> 
       </Col> 
      </Row> 
      </TabPane> 
     </TabContent> 
     </div> 
    ); 
    } 
} 

Answer 1

這聽起來像你的架構團隊希望你能保持在一個終極版商店集中的狀態，你是問，如果你能使用的保持自己的狀態的部件。這裏顯然存在衝突，但是您可以通過在商店中保留選項卡狀態，使用容器在切換時更新選項卡以及調度操作，然後選擇選項卡來實現標籤所需的內容。

如果您無法對您的用戶界面的商店結構進行更改，那麼我認爲您只能進行設計和組件選擇，以便與商店中的數據一起使用。我不確定你的架構團隊有多僵化。

一個簡單的實現你的例子可能是這樣的：

import MySecondChildContainer from '/containers/MySecondChildContainer'; 

const TabbedParent = ({activeTab, clickHandler}) => 
     <div> 
     <Nav tabs> 
      <NavItem> 
      <NavLink 
       className={classnames({ active: activeTab === '1' })} 
       onClick={() => clickHandler('1')} 
      > 
       MyFirstTab 
      </NavLink> 
      </NavItem> 
      <NavItem> 
      <NavLink 
       className={classnames({ active: activeTab === '2' })} 
       onClick={() => clickHandler('2')} 
      > 
       MySecondTab 
      </NavLink> 
      </NavItem> 
     </Nav> 
     <TabContent activeTab={activeTab}> 
      <TabPane tabId="1"> 
      <Row> 
       <Col sm="12"> 
       <MyFirstChildComponent /> 
       </Col> 
      </Row> 
      </TabPane> 
      <TabPane tabId="2"> 
      <Row> 
       <Col sm="6"> 
       <MySecondChildContainer /> 
       </Col> 
      </Row> 
      </TabPane> 
     </TabContent> 
     </div> 

const mapStateToProps = (state) => ({ 
    activeTab: state.activeTab, 
}); 

const mapDispatchToProps = dispatch => ({ 
    clickHandler(id) { dispatch(TabClicked(id)) }, 
}); 

export connect(mapStateToProps, mapDispatchToProps)(TabbedParent);