将类组件（本地状态）转换为无状态的功能组件和容器

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