У меня есть реагировать-JS приложение со следующей структурой:Как я могу получить доступ к одному виду в SPA?
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"
}
}
В моем основном сайте я в основном пытаюсь создайте одностраничное приложение, в котором мы перечислим книги из файла 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'))
То, что я действительно пытаюсь сделать, - это позволить пользователю щелкнуть объект книги из списка и получить единый вид этой книги со всеми ее данными. Я установил маршруты вверх, как я вижу логически, но мне интересно, где я упускаю трюк здесь.
Может кто-нибудь помочь мне точку в нужном месте или в равной степени на меня орать, если это все не так :)
Марк