React 重用组件根据使用位置执行不同的 get/post 请求

Question

React 新手，创建一个网站，其中包含前端将获取的 api 和 post 数据。我想为每个页面都有一个工具栏，它将提供基本功能例如新建、更新、删除和搜索。这很容易创建，但我的问题是这个工具栏将在几个不同的页面上重复使用，我希望它能在特定元素所在的页面上运行。 IE 如果在员工屏幕上，它将获取系统中的员工列表（搜索）、创建员工（新）或（删除）员工。但在库存屏幕上，相同的工具栏将用于创建（新）库存、编辑现有库存等。我可以让它毫无问题地与 api 对话，但我最大的问题是如何让它在 Employee 部分中使用时调用 'api/Employees'... 控制器方法，以及如何在清单中使用时调用 'api/Inventory' 方法。

我正在抓取 url 路径并使用 api 作为变量，例如：

var x = 'localhost:xxxx/api/' ;

然后将 var x 附加到 url 路径，这样 React 最终会从 api 到 post/get 中获得完整的 URl。

var locArray = window.location.pathname.split('/');
var url = locArray[0];
var x = x + url;
var x is now localhost:xxxx/api/Employees

然后进一步在 var x 后附加要调用的特定方法（get/post，等等）

虽然这行得通，（不是很好，因为所有东西都必须具有相同的通用名称 Employees/Get、Inventory/Get 等）必须有更好的方法来处理它高效和功能。一些笔记。我在反应组件本身中使用 HTMl 元素，但实际上并没有使用任何 .html 页面，一切都是通过 React 和 jQuery 的一点点完成的，其中 React 给我带来了太多问题.使用带有开关的 React Router。

App.js

  render (){
    return (
      <Router>
      <Switch>
      <Route exact path="/login" component={Login}/>
      <Route path="/employees"> 
      <ToolBar></ToolBar>
        <SideBar></SideBar>
        </Route>
        <Route path="/inventory">
        <SideBar></SideBar>
        <ToolBar></ToolBar>
        </Route>
        </Switch>
      </Router>
    );
  }

Toolbar.js


class ToolBar extends React.Component {
  constructor(props){
    super(props);
      this.state = {
       ...
      }
      var x = 'localhost:xxxx/api/' ;
      var locArray = window.location.pathname.split('/');
      var url = locArray[0];
      x = x + url;
  }

  btnSearchClick(){
      let userToken =JSON.parse(localStorage.getItem("LoggedToken"));
      var method= "/Get?user=";
      x = x + method;
      fetch('x+userToken, {
        method:'GET'
      }).then((res)=>{
        if(res.ok){
          return res.json();
        }
      }).then((res)=>{
         ... (set state to res.items)
         ... (update LoggedToken, etc)
        }
      });
    }

  render(){
    ...
    <button id="btnSearch" onClick={btnSearchClick} />
  }
}

我假设我缺少一些简单的步骤或过程，因为反应的全部要点是可重用的我无法想象我必须有几个不同的工具栏才能完成这个。

Answer 1

像这样在应用程序页面上设置道具就可以使用了

 <ToolBar dataSource="localhost:xxxx/api/Employees"></ToolBar>

然后在工具栏中执行此操作

fetch(this.props.dataSource+"/get" ...

React 重用组件根据使用位置执行不同的 get/post 请求

React reuse a component performing different get/post requests based on where used

reactjs

native