クラスコンポーネント（ローカル状態）をステートレス機能コンポーネントとコンテナに変換する

Question

私はリアクタンスレスキューには新しく、現在はソフトウェアアーキテクチャチームからステートレス機能コンポーネントとしてすべてのコンポーネントを書き込むというプロジェクトに取り組んでいますReact 0.14に導入されました）、還元状態の部分を渡す必要があるときはいつでも、私たちは容器を使うべきです。

私の質問は次のとおりです： このパターンはすべてのコンポーネントに適用できますか？独自の "状態"（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

であるあなたのアーキテクチャチームが再来店での集中状態を維持するためにあなたを望んでいるように聞こえる、とあなたは、自分の状態を維持するコンポーネントを使用することができれば、あなたは求めています。明らかにそこには競合がありますが、タブで状態を維持したり、コンテナを使用してタブを更新したり、アクションをディスパッチしたりしてタブを選択することで、タブで必要なものを実現できます。

あなたのUIのストアの構造を変更できない場合は、店舗で利用できるデータで機能するデザインとコンポーネントの選択しかできないと思います。あなたのアーキテクチャチームがどれほど柔軟性がないのかよく分かりません。あなたの例の

単純な実装は次のようになります。

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