从类转换为具有父子组合的功能组件

问题描述

我正在尝试将具有继承的 React 类转换为功能组件，并且不会错过任何功能。到目前为止，我阅读了大量文章，但不知道该怎么做。主要问题是我的父组件修改了子组件的状态。

# Base class
class BaseTable extends React.Component {

  // function to filter table when search text is changed
  _onChangeText = (ev,text) => {
    // storing filterText as a state,so onDropdownChange() can refresh filter
    this.setState({ filterText: text });

    if (this.state.items[0] && this.state.items[0].hasOwnProperty(this.state.filterBy)) {
      // refreshing the filteredItems array with new query
      this.setState({
        filteredItems: text ? this.state.items.filter(item => item[this.state.filterBy].toLowerCase().indexOf(text.toLowerCase()) > -1) : this.state.items,selectedPageIndex: 0

      });
    }
  };
}

export default BaseTable;

通过使用 this 引用扩展它并使用父类的方法的子类：

class SpecificTable extends BaseTable {
  constructor(props) {
    super(props);
  }

this.state = {
      items: [],filteredItems: [],filterText: "",selectedPageIndex: 0,isError: false,errMsg: ''
    };

return (
<TextField
 label="Search Query:"
 onChange={this._onChangeText}
 styles={controlStyles}
 value={this.state.filterText}
 />
);
}

export default SpecificTable;

目标是将其转换为没有类的功能组件并重用 BaseTable 中的那些函数，因为我有一些“SpecificTables”。我正在考虑创建 ReactContext，但仍然有问题。

解决方法

编辑：添加指向我对 composition over inheritance

的评论的链接

在功能组件中，您可以通过创建一个可重复使用的钩子来实现，该钩子可以被以前扩展 BaseTable 的各种表组件使用

const useBaseTable = () => {

   const [state,setState] = useState(your_base_state);

   const onChangeText = useCallback((arg) => {
      ... your onChangeText
   },[...relevant dependencies]);

   // return your state,setState (if necessary),and your callback 
   // in reality,you can return whatever you want from this hook
   return [state,setState,onChangeText];
}