reactjs - 将类组件(具有本地状态)转换为无状态功能组件和容器

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

听起来您的架构团队希望您将状态集中在 Redux 存储中，并且您询问是否可以使用维护自己状态的组件。显然存在冲突，但是您可以通过将选项卡状态保留在存储中、使用容器在选项卡切换时更新选项卡以及在选择选项卡后分派(dispatch)操作来实现您想要的选项卡。

如果您无法更改 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);