反应不呈现李元素

尝试呈现元素列表，但浏览器返回给我这样的东西。在教程，我看，返回“丽”的元素，但我不无为什么它返回这个反应不呈现李元素

<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>

需要返回“丽”元素

进出口新的反应，所以避风港”牛逼任何想法，为什么它的发生我的代码

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') 
);

来源

2016-12-19 Егор Кротенко

你的组件必须与资本起步较晚。

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

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

然后渲染像

<Contact {...props} />

来源

2016-12-19 10:22:48 lustoykov

组件名称必须<Contact />不<contact />。

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') 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="root"></div>

上反应的网站有大约元件和组件之间的差异的解释 - React Components, Elements, and Instances

来源

2016-12-19 10:22:59

反应不呈现李元素

回答

相关问题