巧用业务组件，轻松实现多个页面操作聚合

2023-09-21 14:20:19

在前端开发中，我们经常会遇到这样的场景：多个页面都需要用到同样的操作，比如搜索、分页、排序等。如果我们把这些操作都写在每个页面中，不仅代码量会变得很大，而且维护起来也会很麻烦。

为了解决这个问题，我们可以使用业务组件来将这些操作封装起来。业务组件是一种可以独立运行的代码块，它可以被多个页面引用。这样一来，我们就只需要在业务组件中写一次代码，就可以在多个页面中重复使用。

下面我们来看一个具体的例子。假设我们有两个页面，页面A和页面B，它们都需要用到搜索功能。我们可以创建一个名为“搜索组件”的业务组件，然后将搜索功能的代码写在该组件中。接下来，我们只需要在页面A和页面B中引用“搜索组件”，就可以实现搜索功能了。

// 搜索组件
import React, { useState } from 'react';

const SearchComponent = () => {
  const [keyword, setKeyword] = useState('');

  const handleSearch = () => {
    // 搜索逻辑
  };

  return (
    <div>
      <input type="text" value={keyword} onChange={(e) => setKeyword(e.target.value)} />
      <button onClick={handleSearch}>搜索</button>
    </div>
  );
};

export default SearchComponent;

// 页面A
import React from 'react';
import SearchComponent from './SearchComponent';

const PageA = () => {
  return (
    <div>
      <SearchComponent />
    </div>
  );
};

export default PageA;

// 页面B
import React from 'react';
import SearchComponent from './SearchComponent';

const PageB = () => {
  return (
    <div>
      <SearchComponent />
    </div>
  );
};

export default PageB;