Question

我开始研究我的工程论文，并决定将其写为React中的SPA，并与ASP.NET Core后端上的REST API进行通信。到目前为止，我已经使用ASP.NET MVC和Winforms完成了一些应用程序，但是我想扩展我的知识并学习一些新技术。因此，我最近开始学习React，从一开始我就试图在其中创建非常简单的SPA。

这是问题所在：假设我们有一个包含大学数据的应用程序。即：大学，其系，系的学科，学科的讲师等。

我想对上述结构进行简单的导航-在主页上显示我在数据库中拥有的每所大学，然后希望能够单击大学并获得其系，然后在部门列表中，单击一个部门，然后从该部门获取例如主题，依此类推，您就知道了。

带有必要端点的后端在localhost上运行。问题在于何时何地在前端获取数据，如何在组件之间传递id，如何为此类应用程序构造结构，等等。

我花了3天的时间进行尝试，但不幸的是没有任何效果，现在我的脑海一片混乱，以至于我考虑回到好的ASP.NET MVC。。但是我敢肯定一定是我想念的东西，因为我不相信这是不可能的，所以不明白。我认为MVC也可能有很多习惯，这些习惯可能会影响我对Web api和纯前端应用程序的理解。

我已经阅读了官方文档，观看了教程，stackoverflowed，尝试了自己的想法，每个步骤重复了5次。简单的路由和整体反应工作流程对我来说不是问题，问题在于特定的情况。

任何人都可以向我提供一些信息或线索，以了解如何在React中处理此类设计（理想情况下带有示例）吗？

编辑

好的，所以我要分享我今天想到的设计。这可以按预期工作，但无法通过在浏览器的搜索框中输入特定的路线来手动进行选择-唯一的方法是沿着整个“大学路径”浏览

App.js

const App = () =>
  <BrowserRouter>
    <>
      <NavBar />

      <div className="row home-container">
        <div className="col s12 m8 l9 home-part">
          <div className="data-container">
            <Route path="/" component={MainContainer} />
          </div>
        </div>
        <Sidebar />
      </div>
    </>
</BrowserRouter>

export default App

MainContainer.js

const defaultBreadcrumb = { title: "Uczelnie", path: "/universities" };

class MainContainer extends React.Component {
  state = {
    elements: [],
    breadcrumbs: [
      defaultBreadcrumb
    ]
  }

  componentDidMount() {
    fetch(`https://localhost:44349/api/v1/universities`)
      .then(res => res.json())
      .then(json => this.setState({elements: json}));
  }

  componentWillReceiveProps(nextProps){
    if(nextProps){
      var newBreadcrumbs = nextProps.location.breadcrumbs ? nextProps.location.breadcrumbs : [defaultBreadcrumb];

      this.setState({
        breadcrumbs: newBreadcrumbs
      });
    }
  }

  render() {
    return (
      <>
        <nav className="colornav">
          <div className="nav-wrapper path-header-wrapper">
            <div className="col s12 subsite-title">
              {this.state.breadcrumbs.map((b, key) => (
                <NavLink key={key} to={b.path} className="breadcrumb">{b.title}</NavLink>
              ))}
            </div>
          </div>
        </nav>

        <div className="home-content">
          <ul className="collection">
            <Route 
              exact 
              path="/universities" 
              render={() => {return <Universities elements={this.state.elements} />}} 
            />
            <Route 
              exact 
              path="/universities/:id"
              render={() => { return <Departments {...this.props} />}} 
            />
            <Route 
              exact 
              path="/universities/:id/Lessons"
              render={() => { return <Lessons {...this.props} />}} 
            />
          </ul>
        </div>
      </>
    );
  }
}

export default MainContainer

Universities.js

const Universities = ({elements}) => 
  <>
    {elements.map((u) => 
      <NavLink 
        key={u.name} 
        to={{
          pathname: `/universities/${u.name}`, 
          univId: u.universityId,
          univName: u.name,
          breadcrumbs: [
            {title: "Uczelnie", path: `/universities`}, 
            {title: u.name, path: `/universities/${u.universityId}`}
          ]
        }} 
        className="collection-item path-list-item">

        <div>{u.name}
          <li className="secondary-content">
            <i className="material-icons">send</i>
          </li>
        </div>
      </NavLink>
    )}
  </>

export default Universities

Departments.js

class Departments extends React.Component {
  state = {
    elements: []
  }

  componentDidMount() {
    fetch(`https://localhost:44349/api/v1/departmentsofuniversity/${this.props.location.univId}`)
      .then(res => res.json())
      .then(json => this.setState({elements: json}));
  }

  render() {
    return (
      <>
        {this.state.elements.map((d) => 
          <NavLink 
            key={d.name} 
            to={{
              pathname: `/universities/${d.name}/lessons`, 
              deptId: d.departmentId,
              deptName: d.name,
              breadcrumbs: [
                {title: "Uczelnie", path: `/universities`}, 
                {title: this.props.location.univName, path: `/universities/${this.props.location.univId}`}, 
                {title: d.name, path: `/universities/${this.props.location.univId}/lessons`}
              ]
            }} 
            className="collection-item path-list-item">

            <div>{d.name}
              <li className="secondary-content">
                <i className="material-icons">send</i>
              </li>
            </div>
          </NavLink>
        )}
      </>
    );
  }
}

export default Departments

最后-Lessons.js

class Lessons extends React.Component {
  state = {
    elements: []
  }

  componentDidMount() {
    fetch(`https://localhost:44349/api/v1/lessonsfromdepartment/${this.props.location.deptId}`)
      .then(res => res.json())
      .then(json => this.setState({elements: json}));
  }

  render() {
    return (
      <>
        {this.state.elements.map((l, key) => 
          <NavLink 
            key={key} 
            to={{
              pathname: `/universities/${l.name}/Lessons/${l.name}`, 
              deptId: l.departmentId,
              breadcrumbs: [
                {title: "Uczelnie", path: `/universities`}, 
                {title: this.props.location.univName, path: `/universities/${this.props.location.univId}`}, 
                {title: this.props.location.deptName, path: `/universities/${this.props.location.deptName}/lessons`},
                {title: l.name, path: `/universities/${this.props.location.deptId}/lessons/${l.name}`}
              ]
            }} 
            className="collection-item path-list-item">

            <div>{l.name}
              <li className="secondary-content">
                <i className="material-icons">send</i>
              </li>
            </div>
          </NavLink>
        )}
      </>
    );
  }
}

export default Lessons

由于所有这些都是非常重复的，当我们开始深入大学学习时，我认为最好将这些列表放到一个List组件中（如果要显示更多内容，可以使用一些特定的属性）并且仅将获取的元素传递给它。几乎整个应用程序都使用该“类似于列表”的gui，因此它可能很有用。我现在就是这样。

现在，当您看到我脑海中的设计时，可以随时分享您的想法。也许我应该以其他更好的方式完成它？

编辑2

更新了代码，添加了面包屑！很酷，但是我前面提到了一个大问题-我无法直接转到特定的路线，因此无法从课程回到部门...所以整个Router事情都是无用的，尤其是当我想共享时链接到特定的路线（将来）。无论如何，这里是更新的代码。

Answer 1

问题在于何时何地在前端获取数据，如何在组件之间传递ID，如何为这样的结构应用程序等。

通常，您将为此使用状态容器库。最常与React一起使用的是Redux。您将在存储中存储/缓存响应数据，使用操作激发请求并在化简器中解析响应。您还可以使用redux-promise中间件为异步调用/请求调度操作。

一个很好的视频教程对此进行了深入解释：https://www.udemy.com/react-redux/

使用React Router进行简单导航[错了]

1 个答案: