React 重用一个组件，根据使用位置执行不同的获取/发布请求

Question

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

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

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

然后附加带有 url 路径的 var x，以便 react 最终获得要发布/获取的 api 的完整 URl。

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

然后进一步附加varx，并附加要调用的特定方法(获取/发布等(

虽然这有效，(不是很好，因为所有内容都必须具有相同的通用名称 Employees/Get、Inventory/Get 等(必须有一种更好的方法来处理它，它更有效、更实用。 一些注意事项。我在 react 组件本身中使用 HTMl 元素，但实际上并没有使用任何.html页面，一切都是通过 React 和少量 jQuery 完成的，其中 React 给了我太多问题。将 React 路由器与交换机一起使用。

应用.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>
);
}

工具栏.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} />
}
}

我假设我缺少一些简单的步骤或过程，因为 react 的全部意义在于可重用，我无法想象我必须有几个不同的工具栏才能完成此操作。

Answer 1

通过在应用程序页面上设置道具来工作，如下所示

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

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

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