[英]React ES6 | Child Component not being rendered
我正在嘗試使用React從Firebase渲染數組。 我有一個Container視圖,該視圖從Firebase獲取數據,並將數據傳遞給子組件。 這是代碼:
Container.jsx
import React from 'react'
import Firebase from 'firebase'
import loadsTable from './loadstable'
class Container extends React.Component{
constructor(props){
super(props)
this.loads = [];
this.state = {loads:[]}
}
render(){
console.log("render" , this.state.loads)
return( <div>
<loadsTable loads={this.state.loads}/>
</div>
)
}
componentWillMount(){
this.firebaseRef = new Firebase("https://***.firebaseio.com/loads");
this.firebaseRef.on("child_added", function(dataSnapshot) {
console.log(dataSnapshot.val())
this.loads.push(dataSnapshot.val());
this.setState({
loads: this.loads
});
}.bind(this));
}
}
React.render(<Container/> , document.getElementById('app'))
這樣可以成功獲取數據(負載),並且console.logs相同。
這是子組件的代碼:
LoadsTable.jsx
import React from 'react'
class loadsTable extends React.Component{
constructor(props){
super(props)
console.log("init loadsTable");
this.state = {loads:this.props.loads}
}
render(){
console.log("this.state.loads " , this.props.loads);
console.log("this.state.loads " , this.state.loads);
var loads = this.props.loads.map(function(load, index){
console.log("load " , load)
return <tr><td>{load.load_number}</td></tr>
});
return(
<div className="col-md-7">
<table className="table table-hover table-bordered table-striped loads">
<tbody>
{loads}
</tbody>
</table>
</div>
)
}
}
export default loadsTable
這里的問題是什么都沒有呈現,實際上,構造函數中的console.log從未被調用。 如果我在Container構造器中console.log LoadsTable,則會得到:
Chrome Dev Console輸出
function loadsTable(props) {
_classCallCheck(this, loadsTable);
_get(Object.getPrototypeOf(loadsTable.prototype), "constructor", this).call(this, props);
console.log("init loadsTable");
this.state = { loads: this.props.loads };
}
因此,我的問題是:有人知道我在這里做錯了什么,為什么未實例化LoadsTable嗎?
我正在使用Gulp進行構建和Babelify來移植ES6。
任何幫助,將不勝感激。 提前致謝。
組件名稱必須大寫。 所以應該
import LoadsTable from ...;
和
<LoadsTable ... />
代替。
參見https://facebook.github.io/react/docs/jsx-in-depth.html#html-tags-vs.-react-components
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.