reactjs - React 中的子类化

Question

我创建了一个自定义文本分页组件(显示当前分页信息。例如总共 1-N 个)，我发现自己向父组件(ComponentA 和 ComponentB)添加了重复代码。每次我需要将 TextPagination 组件添加到父组件时，我都需要添加相同的状态和回调方法。如果您查看 ComponentA 和 ComponentB，它们都有 this.state = { itemCount: 0 } 以及 onDisplayLessData 和 onDisplayMoreData 回调方法。这是我想要避免的事情，尤其是当其他开发人员需要使用 TextPagination 组件时，他们需要记住添加所有这些......在我看来不太好。

组件A

class ComponentA extends React.Component {
  constuctor() {
    super();
    this.state = { itemCount: 0 }
  } 
  render(){
    // re-render data
    <TextPagination .../>
 }

  onDisplayMoreData(){}
  onDisplayLessData(){}
}

组件B

class ComponentB extends React.Component {
  constuctor() {
    super();
    this.state = { itemCount: 0 }
  } 
  render(){
    // re-render data
    <TextPagination .../>
  }

  onDisplayMoreData(){ //when child updates, this gets called }
  onDisplayLessData(){ //when child updates, this gets called }
}

文本组件

class TextPagination extends React.Component {

    constructor() {
        super();
        this.state = { itemCount: 0, showLess: false };
        this.displayMoreData = this.displayMoreData.bind(this);
        this.displayLessData = this.displayLessData.bind(this);
    }

    render() {}

   displayMoreData(value) {
     // more code
     // callback to notify the parent component
     this.props.onDisplayMoreData(value);
   }

   displayLessData(value) {
     // more code
     // callback to notify the parent component
     this.props.onDisplayLessData(value);
   }
}

因此，我打算使用 this.state = { itemCount: 0 } 和回调方法创建另一个名为 Pagination 的类，并将其扩展至 React.Component。然后ComponentA和ComponentB可以从Pagination类扩展。

示例:

class Pagination extends React.Component {

    constructor() {
        super();
        this.state = {
            itemCount: 0            
        };

        this.onDisplayMoreData = this.onDisplayMoreData.bind(this);
        this.onDisplayLessData = this.onDisplayLessData.bind(this);
    }

    onDisplayMoreData(itemCount) {
        this.setState({
            itemCount: itemCount
        });
    }

    onDisplayLessData(itemCount) {
        this.setState({
            itemCount: itemCount
        });
    }

} 

ComponentA extends Pagination {
  constructor() { super(); }
  render() {
    // re-render data
    <TextPagination .../>
  }
}

ComponentB extends Pagination {
  constructor() { super(); }
  render() {
    // re-render data
    <TextPagination .../>
  }
}

这种方法似乎没有任何问题。 ComponentA和ComponentB不再需要有状态和回调方法。其他开发者在使用TextPagination时不需要记住添加状态和回调方法。

这是正确的解决方案吗？如果没有，请给我一些建议。

该死的，我刚刚想到如果 ComponentA 或 ComponentB 需要添加额外的状态，那么它将覆盖原始父级的状态......这是正确的吗？

感谢您的帮助!

Answer 1

听起来你想要的是一个高阶组件。 HOC 实际上只是采用 React 组件并返回具有某种形式的扩展功能的新 React 组件的函数。在本例中，就是分页功能。它看起来像这样:

const Pagination = (WrappedComponent) => {
  return class Pg extends React.Component {

    constructor(props) {
        // don't forget to call super with props!
        super(props);
        this.state = {
            itemCount: 0            
        };

        this.onDisplayMoreData = this.onDisplayMoreData.bind(this);
        this.onDisplayLessData = this.onDisplayLessData.bind(this);
    }

    onDisplayMoreData(itemCount) {
        this.setState({
            itemCount: itemCount
        });
    }

    onDisplayLessData(itemCount) {
        this.setState({
            itemCount: itemCount
        });
    }

    render() {
      return <WrappedComponent {...this.props}/>
    } 
  }
}

然后，当您想要创建带有分页的组件(例如 ComponentA)时，您可以像这样导出它:

导出默认分页(ComponentA)

一些关于 HOC 的额外阅读内容: https://gist.github.com/sebmarkbage/ef0bf1f338a7182b6775 https://medium.com/@franleplant/react-higher-order-components-in-depth-cf9032ee6c3e#.5riykqsso

希望这有帮助!