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 }
}

TextComponent中

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实际上只是采用反应组件并返回具有某种形式的扩展功能的新反应组件的函数。在这种情况下，分页功能。它看起来像这样：

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

希望这有帮助！

React

1 个答案: