时间戳

首页 > 解决方案 > 从类转换为具有组合父子的功能组件

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

问题描述

我正在尝试将具有继承的 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 中的这些函数，因为我有一些“特定表”。我正在考虑创建 ReactContext 但仍然遇到问题。

标签： javascriptreactjsreact-functional-component

解决方案

编辑：将链接添加到我关于组合而不是继承的评论

在功能组件中，您可以通过创建一个可重用的钩子来实现，该钩子可由以前扩展 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];
}

推荐阅读