Reagieren nicht rendern Li-Elemente

Question

Versuchen Sie, Liste der Elemente zu rendern, aber Browser mir etwas zurückgeben. In Tutorial, das ich sehe, gibt "li" Elemente, aber ich keine nicht, warum es diesen

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

Need gibt "li" Elemente

Im neu in Reaktion, so haven‘zurückzukehren t eine Ahnung, warum es passiert Mein Code

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

Ihre Komponente später mit Kapital beginnen.

In JSX werden kleingeschriebene Tag-Namen als HTML-Tags betrachtet.

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

und dann machen wie

<Contact {...props} /> 

Answer 2

Komponentenname <Contact /> nicht <contact /> sein.

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>

Vor-Ort-Reaktion gibt es Aufschluss über Unterschied zwischen den Elementen und Komponenten - React Components, Elements, and Instances