0

React 新手，创建一个带有 api 的网站，前端也将获取和发布数据。我希望每个页面都有一个工具栏，它将提供基本功能，例如新建、更新、删除和搜索。这很容易创建，但我的问题是这个工具栏将在几个不同的页面上重复使用，我希望它适用于该特定元素所在的页面。IE 如果在员工屏幕上，它将获取系统中的员工列表（搜索），创建员工（新）或（删除）员工。但是在库存屏幕上，相同的工具栏将用于创建（新）库存，编辑现有库存等。我可以让它毫无问题地与 api 对话，但我最大的问题是如何让它调用 'api /雇员'...

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

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

然后在 var x 上附加 url 路径，以便 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

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

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

应用程序.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} />
  }
}

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

4

1 回答 1

1

通过像这样在应用页面上设置道具让它工作

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

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

fetch(this.props.dataSource+"/get" ...
于 2019-09-10T14:19:34.763 回答