如何通过数据库数据创建react组件?
发布于 1 个月前 作者 jowang2016 393 次浏览 来自 问答

想要通过引入数据库的数据,创建react组件,应该怎么引入啊?

15 回复

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来获取这个数据。我给你个最基本的思路吧,在Appconstructor或者componentDidMount等声明周期调用jQuery或其他组件(如果要用服务器渲染,isomorphic-fetch值得拥有)获取数据,赋值某个变量(比如this.books,类似刚代码中的this.props.books),这用个变量来渲染视图,然后调用this.forceUpdate()手动更新让react渲染页面 ,需要注意的是state不适合放列表这个大玩意,而state能让react自动重绘,this.books并不能让react自动重绘,所以获取数据之后需要手动update

楼上说的很好了,想练手的话可以用论坛的 api。

@DevinXian 感谢你的回答!可是以我的水平,有些理解困难,能说得简单一点吗?

@IchiNiNiIchi 论坛的api在哪里能查看啊?能给个链接吗?

@jowang2016 稍后给你一段代码,你自己运行一下吧- -

@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 这会儿才补上…抱歉啊

回到顶部