Reactjs React中的子类化

我创建了一个自定义文本分页组件（显示当前分页信息，例如1-N of total），我发现自己在父组件（ComponentA和ComponentB）中添加了重复代码。每次我需要将TextPagination组件添加到父组件时，我都需要添加相同的状态和回调方法。如果您查看ComponentA和ComponentB，它们都有这个.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(){}
}

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

例如：

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

类分页扩展了React.Component{
构造函数（）{
超级（）；
此.state={
项目计数：0
};
this.onDisplayMoreData=this.onDisplayMoreData.bind（this）；
this.onDisplayLessData=this.onDisplayLessData.bind（this）；
}
onDisplayMoreData（itemCount）{
这是我的国家({
itemCount:itemCount
});
}
onDisplayLessData（项目计数）{
这是我的国家({
itemCount:itemCount
});
}
} 
ComponentA扩展分页{
构造函数（）{super（）；}
render（）{
//重新渲染数据
}
}
组件B扩展分页{
构造函数（）{super（）；}
render（）{
//重新渲染数据
}
}

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

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

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

---

谢谢你的帮助

听起来您想要的是更高阶的组件。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}/>
    } 
  }
}

const分页=（WrappedComponent）=>{
返回类Pg扩展了React.Component{
建造师（道具）{
//别忘了用道具打电话给super！
超级（道具）；
此.state={
项目计数：0
};
this.onDisplayMoreData=this.onDisplayMoreData.bind（this）；
this.onDisplayLessData=this.onDisplayLessData.bind（this）；
}
onDisplayMoreData（itemCount）{
这是我的国家({
itemCount:itemCount
});
}
onDisplayLessData（项目计数）{
这是我的国家({
itemCount:itemCount
});
}
render（）{
返回
} 
}
}

然后，当您想要创建带有分页的组件（例如，

ComponentA

）时，您可以这样导出它：

导出默认分页（ComponentA）

为您提供一些有关HOCs的额外阅读：

---

希望这有帮助

我会考虑两种选择：1）保持纯粹，道具是传入和通过的（无状态），如果需要道具进行更改，则启动回调并期望实现者修改状态。2） 使用状态，但将其保持在您的顶层，并将其作为道具向下传递，如果孩子需要（例如）增加页面索引，他们应该通过回调给家长谢谢，这可能让我意识到我在家长和孩子组件中都有状态。我需要做一点重构。谢谢，我会尝试一下。我不了解出口部分，但看起来这就是我想要的。我会让你知道它是否有效。谢谢对不起，我的意思是我不明白它是怎么工作的。我知道导出默认值的含义，但我不理解如何使用导出默认分页（ComponentA）。这将在分页文件中，当我使用它时，我会从“pagination”导入分页，然后const p=pagination（ComponentA）？？？那没有道理。不，你应该把它放在

组件a

文件中。您不需要执行导出默认组件a，而是执行导出默认分页（组件a）。这样，您就可以导出包装好的组件了好吧…明白了。谢谢

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

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