想要通过引入数据库的数据,创建react组件,应该怎么引入啊?
what?不明白
@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
楼上说的很好了,想练手的话可以用论坛的 api。
@DevinXian 感谢你的回答!可是以我的水平,有些理解困难,能说得简单一点吗?
@IchiNiNiIchi 论坛的api在哪里能查看啊?能给个链接吗?
@jowang2016 稍后给你一段代码,你自己运行一下吧- -
@DevinXian 嗯,好的!
@jowang2016 页面最上面右边的 API 点进去就是了。
@IchiNiNiIchi 是的,我看到那里了,可是不对照源码,很难看得懂,有没有github源码地址啊?
@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'))
@jowang2016 这会儿才补上…抱歉啊
@DevinXian 多谢!
@IchiNiNiIchi 好的!看到了!