想要通过引入数据库的数据，创建react组件，应该怎么引入啊？
@DevinXian 是这样的，我创建了一个react组件App，组件内容是： class App extends Component { render() { return (
{this.props.books.map(function(book, index){
<div className="col-md-3">
<a href="">
<div className="thumbnail">
<img src="{book.bookimg}"
alt="book image" />
<div className="caption">
<h3>{book.bookname}</h3>
<p>{book.bookdesc}</p>
</div>
</div>
</a>
</div>
}.bind(this))}
);
} }
export default App; 然后通过react-router在app.js中生成，代码如下： import App from ‘./components/app.js’; const routes=( <Router history={browserHistory}> <Route path="/" component={App} book={bookdata} /> </Router> ) render( routes, document.getElementById(“main”) ); 这个app.js会通过webpack转换成bundle.js，然后引入到html文件中，最终显示App中的模版。 现在mongo（数据库连接使用了mongoose）中已经储存了bookdata，现在的问题是如何将bookdata关联到app.js上，进而将数据通过App组件显示到页面上。 有没有办法啊？
你需要获取一个数据的途径…例子一搜一堆啊～后端提供返回数据的接口，react来获取这个数据。我给你个最基本的思路吧，在App的constructor或者componentDidMount等声明周期调用jQuery或其他组件（如果要用服务器渲染，isomorphic-fetch值得拥有）获取数据，赋值某个变量（比如this.books，类似刚代码中的this.props.books），这用个变量来渲染视图，然后调用this.forceUpdate()手动更新让react渲染页面 ，需要注意的是state不适合放列表这个大玩意，而state能让react自动重绘，this.books并不能让react自动重绘，所以获取数据之后需要手动update
@jowang2016 呃，你是要 api 的源码话，页面最下面的 源码地址 点进去，里面的 api 目录就是了。其实就是用 express 处理 ajax 的请求，然后通过 json 返回数据。
import React, {Component, PropTypes} from "react";
import {render} from "react-dom";
import $ from "jquery";
class App extends Component {
constructor() {
super()
// this.getData()
//这里也可以的
}
componentDidMount() {
this.getData()
}
getData() {
const self = this
//只是模拟一下请求接口
$.get('http://registry.npm.taobao.org').then(data => {
self.books = [{
bookimg: '',
bookname: 'js starter kit',
bookdesc: 'A starter kit for js'
}, {
bookimg: '',
bookname: 'NodeJS starter kit',
bookdesc: 'A starter kit for JS'
}]
self.forceUpdate()
})
}
render() {
const books = this.books || []
//a标签里面包含块级元素，seo不友好哦
return (
<ul className="book-list">
{
books.map((book, i) => (
<div className="col-md-3" key={i}>
<a href="#">
<div className="thumbnail">
<img src="{book.bookimg}" alt="book image"/>
<div className="caption">
<h3>{book.bookname}</h3>
<p>{book.bookdesc}</p>
</div>
</div>
</a>
</div>
))
}
</ul>
)
}
}
render(<App/>, document.querySelector('#app'))
