反應不呈現李元素

嘗試呈現元素列表，但瀏覽器返回給我這樣的東西。在教程，我看，返回「麗」的元素，但我不無爲什麼它返回這個反應不呈現李元素

<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

反應不呈現李元素

回答

相關問題