Question

我有一个具有以下结构的react-js应用程序：

public
src
  components
    - Books.js
    - BookShow.js
  - App.css
  - App.js
  - index.js

在我的package.json中，我使用以下节点模块：

{
  "name": "tester",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "react-scripts": "0.7.0"
  },
  "dependencies": {
    "bootstrap": "^3.3.7",
    "react": "^15.3.2",
    "react-bootstrap": "^0.30.6",
    "react-dom": "^15.3.2",
    "react-router": "^3.0.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

在我的主站点中，我基本上尝试创建一个1页的应用程序，我们从books.json文件中列出书籍。我可以这样做，我可以在Books.js文件中轻松列出书籍，内容如下：

import React from 'react';
import { Link } from 'react-router';
export default React.createClass({


    getInitialState: function() {
        return {
          books: []
        }
      },

      componentDidMount: function() {
        this.request = fetch('https://gist.githubusercontent.com/madwork/adfae25c174bb246c650/raw/db225e4b9c74e1865da1c9cd54cf87d3dee171a5/book.json')
          .then((request) => request.json())
          .then((data) => this.setState({
            books: data,
            isLoading: false
          }))
      },

      componentWillUnmount: function() {
        this.serverRequest.abort();
      },

      render: function() {
        return (
          <div className="container">
            <h1>Books</h1>
            {this.state.books.map(function(book) {
              return (
                <div key={book.id} className="book col-lg-4 col-md-4 col-sm-4">
                <Link
                    to={"/books/"+book.id}
                    className="list-group-item"
                    key={book.id}>
                    {book.name}
                    <img className="img-responsive" src={book.cover} />
                </Link>
                  <h3>{book.name}</h3>
                  <p>{book.author.name}</p>
                  <i className="glyphicon glyphicon-heart">{book.likes}</i>
                </div>
              );
            })}
          </div>

        )
      }

})

在我的主App.js文件和我的index.js文件中，我的路由设置如下：

App.js

import { Link } from 'react-router';
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {

  render() {

    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <ul>
            <li><Link activeStyle={{ color: 'red' }} to="/books">Books</Link></li>
        </ul>

        {this.props.children}

      </div>
    );
  }
}


export default App;

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import { render } from 'react-dom'
import { Router, Route, IndexRoute, browserHistory, hashHistory } from 'react-router'
import App from './App'
import Books from './components/Books'
import BookShow from './components/BookShow'
import './index.css'
import 'bootstrap/dist/css/bootstrap.css'



render((
  <Router history={hashHistory}>
    <Route path='/' component={App}>
      <Route path='/books' component={Books}>
        <Route path='/books/:id' component={BookShow}/>
      </Route>
    </Route>
  </Router>
), document.getElementById('root'))

我真正努力做的是让用户从列表中点击书籍对象，并获得本书及其所有数据的单一视图。我已经按照逻辑方式设置了路线，但我想知道我在哪里错过了这个技巧。

任何人都可以帮助我指出正确的地方，或者如果这是完全错误的话，同样会对我大喊：）

标记

Answer 1

问题是，您的数据存在于Books Component中。而且你没有一个与组件无关的数据层。

有不同的方法，比如Redux，它可以将所有数据保存在全局商店中。

另一种方法是构建自己的数据层。它可能很简单，就像一个被api方法填充的对象。所以你的api方法可以在向你的后端发送请求之前查找缓存的项目。

实际上是无限制的选项..每次有人访问book /：id页面时，你也可以打电话给你后端，然后加载这本书。

因此，这取决于您的知识，时间以及您想要花费的精力。每种解决方案都有其自身的优点和缺点。

就个人而言，我首先会创建一个单独的api模块，它将执行api调用。并使用一些全局存储来存储数据。如果数据几乎是静态的，我会尝试在本地首先找到这本书，如果不在那里调用后端 - ＆gt;将其存储在本地 - ＆gt;把它还给组件。

在某些情况下，使用Redux很好，有些是开销。但是，值得尝试一下。

如何在SPA上访问单个视图？

1 个答案: