React 不渲染 Li 元素

Question

尝试渲染元素列表，但浏览器返回类似的内容。在我观看的教程中，返回“li”元素，但我不知道为什么它返回这个

<div id="root">
    <div data-reactroot="">
       <ul>
          <contact name="vasya"></contact>
          <contact name="Petya"></contact>
          <contact name="Killa"></contact>
          <contact name="Pedro"></contact>
       </ul>
     </div>
</div>

需要返回“li”元素

我是 React 新手，所以不知道为什么会发生我的代码

var contacts = [
    {
    id: 1,
    name: "vasya",
    phone: "0989893"
    },
    {
        id: 2,
        name: "Petya",
        phone: "0986666"
    },
    {
        id: 31,
        name: "Killa",
        phone: "09833333"
    },
    {
        id: 4,
        name: "Pedro",
        phone: "09833434"
    },
]

var contact = React.createClass({
    render: function () {

        return(
            <li> {this.props.name}</li>
              );

    }
});

var ContactList = React.createClass({
    render: function() {
        return (
            <div>
                <ul>
                    {
                    contacts.map(function (el) {
                        return <contact key={el.id} name={el.name}/>;
                    })
                }
                </ul>
            </div>
        );
    }
});

ReactDOM.render(

        <ContactList />,
    document.getElementById('root')
);

Answer 1

您的组件必须稍后从资本开始。

在 JSX 中，小写标签名称被视为 HTML 标签。

var Contact = React.createClass({
    render: function () {
        return (<li> {this.props.name} </li>);
    }
});

然后渲染像

<Contact {...props} />