Javascript React ES6 |未渲染的子组件
我正在尝试使用React从firebase渲染数组。我有一个容器视图,它从firebase获取数据,并将数据传递给子组件。代码如下: Container.jsxJavascript React ES6 |未渲染的子组件,javascript,reactjs,babeljs,Javascript,Reactjs,Babeljs,我正在尝试使用React从firebase渲染数组。我有一个容器视图,它从firebase获取数据,并将数据传递给子组件。代码如下: Container.jsx import React from 'react' import Firebase from 'firebase' import loadsTable from './loadstable' class Container extends React.Component{ constructor(props){
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'))
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
所以,我的问题是:有人知道我在这里做错了什么,以及为什么没有实例化LoadsTable吗
我正在使用Gulp构建和babelify传输ES6
在此方面的任何帮助都将不胜感激。提前感谢。组件名称必须大写。应该如此
import LoadsTable from ...;
及
相反
请参见非常感谢您为Felix做的这件事!
import LoadsTable from ...;
<LoadsTable ... />