找不到react组件

Question

抛出错误:找不到react组件myTable。我有这样的反应..

var myTable = React.createClass({

    render:function () {

        return(
            <div>
                <table  className="table scroll2" >
                    <thead>
                    <tr>
                        <td>Start Date</td>
                        <td>End Date</td>
                        <td>Hours</td>
                        <td></td>
                    </tr>
                    </thead>
                    {
                        this.props.list.map(function (item,i) {
                            return(
                                <tr>
                                    <td>{item.startDate}</td>
                                    <td>{item.endDate}</td>
                                    <td>{item.workInHours}</td>
                                </tr>
                            );
                        })
                    }
                </table>
            </div>
        );
    }
});
angular.module('app').value('myTable',myTable);

我这样叫它：

 <react-component name="myTable"></react-component>

Answer 1

像这样声明您的组件(注意Pascal Casing)：

var MyTable = React.createClass({ ... })

请使用下面的组件：

<MyTable />

正如Justin正确指出的那样，React类名称必须以大写字母开头，否则将被解释为html标签。因此，很多人都在关注Pascal Case。

来自官方文档：

要呈现React组件，只需创建一个以大写字母开头的局部变量

JSX in Depth: HTML Tags vs. React Components

Answer 2

@Mario Tacke你是对的，如果它是一个React元素，那么它必须是pascal大小写的，否则它将被解释为HTML标签元素，而不是react元素。

有关更多信息，请单击此处https://gist.github.com/sebmarkbage/f1f4ba40816e7d7848ad