[英]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.