反应ES6 |子组件未呈现 [英] React ES6 | Child Component not being rendered

问题描述

我正在尝试使用React从firebase渲染数组。我有一个Container视图，它从firebase获取数据，并将数据传递给子组件。以下是代码：

I am trying to render an array from firebase using React. I have a Container view which gets the data from firebase, and passes the data to the child component. Here is the code:

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相同。

this successfully gets the data (loads), and console.logs the same.

这是子组件的代码：

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构造器中调试LoadsTable，我得到：

The problem here is that nothing gets rendered and in fact, the console.log in the constructor is never called. If I console.log the LoadsTable in the Container constuctor, I get:

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？

So, my question is: does anybody know what I am doing wrong here and why the LoadsTable is not being instantiated?

我正在使用Gulp构建并通过语言转换ES6。

I am using Gulp to build and babelify to transpile the ES6.

对此的任何帮助将非常感激。在此先感谢。

Any help on this would be hugely appreciated. Thanks in advance.

推荐答案

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

Component names must be capitalized. So it should be

import LoadsTable from ...;

和

<LoadsTable ... /> 

而不是。

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

这篇关于反应ES6 |子组件未呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！