Warum wird der Alarm während der Verwendung der reinen Funktion nicht angezeigt?

Question

https://plnkr.co/edit/eCZSo6Rl5odN1hTb6BCW?p=preview

Hallo

i Reihe ist die Umsetzung component die hinzugefügt werden, wenn der Benutzer Artikel in Eingabefeld ausfüllen und add Taste

var listItems = this.props.names.map(function(d, idx){ 
     return (<r key={idx}></r>) 
    }) 

drücken, aber es Alarm nicht zeigen, wenn wir versuchen, Komponente hinzuzufügen

const r = (props) => { 
    alert('---') 
    return (
     <li> 
      <span>hiii</span> 
     </li> 
    ); 
}; 

jedes Update ??

Answer 1

Das Problem ist in Ihrem JSX.

return (<r key={idx}></r>) 

Kleinere Tags werden als integrierter HTML-Code angenommen. Um auf benutzerdefinierte Klassen und Funktionen zu verweisen, müssen Sie einen Großbuchstaben verwenden. Daher sucht React nach einem Standard-HTML-Code <r>.

Wenn Sie Ihre Funktion zu R ändern, sollten die Dinge funktionieren.

Siehe die React docs für Details.