反应 ES6 |未呈现子组件

Question

我正在尝试使用 React 从 firebase 渲染一个数组。我有一个容器视图，它从 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'))

这样就成功获取到数据了（loads），和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 从未被调用。如果我 console.log Container 构造函数中的 LoadsTable，我得到：

Chrome 开发控制台输出

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。

如有任何帮助，我们将不胜感激。提前致谢。

Answer 1

组件名称必须大写。所以应该是

import LoadsTable from ...;

和

<LoadsTable ... />

相反。

见https://facebook.github.io/react/docs/jsx-in-depth.html#html-tags-vs.-react-components

反应 ES6 |未呈现子组件

React ES6 | Child Component not being rendered

javascript

reactjs

babeljs