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）时，您可以像这样导出它：

export default Pagination(ComponentA)

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

希望这可以帮助！