Warnung: Unbekannter Prop-Tag <>. Entfernen Sie diese Stütze vom Element

Question

Ich bin neu zu reagieren und ich lernte Unterklassen von einem von Lynda Beispielen. Ich erstelle eine neue Unterkomponentenklasse namens aptList und verwende this.props.eachItem.ownerName, um jeden Index aus der JSON-Datei zu durchlaufen, wobei ownerName eine Eigenschaft ist.

Dies ist der Fehler, den ich bekomme, wenn ich es im Browser ausführen. Die Daten erhalten geholt, aber die prop nicht

nach dem Fehler erkannt zu werden

jedoch die reagieren Konsole immer die JSON feinen

Dies scheint zu sein, ist der Code als gelehrt auf Lynda

var React = require('react'); 
var ReactDOM = require('react-dom'); 
var createReactClass = require('create-react-class'); 

var aptList = createReactClass({ 
render: function(){ 
    return(
     <li>{ this.props.eachItem.ownerName }</li> 
    ); 
} 
}); 


var MainInterface = createReactClass({ 

    getInitialState: function(){ 
     return { 
     title: 'Items', 
     show: function(x){ 
      if(x>10){ 
       return true 
      } 
      else { 
       return false 
      } 
     }, 
     myData: [] 
    } 
}, 

componentDidMount: function(){ 

    this.serverRequest = $.getJSON('static/scripts/src/myData.json', function(results){ 
     var tempData = results; 
     this.setState({ 
      myData: tempData 
     }); 
    }.bind(this)); 
}, 


componentWillUnmount: function(){ 
    this.serverRequest.abort(); 
}, 

render: function(){ 

    var style = { 
     color: 'red', 
     fontWeight: 900 
    }; 

    var reactData = this.state.myData; 
    reactData = reactData.map(function (each, index) { 
     return (
      <aptList eachItem = { each } 
        key = { index }/> 
     ) 
    }.bind(this)); 

    return (
     <div> 
      <h1>{ this.state.show(12) ? 'List of ':null }{ this.state.title }</h1> 
      <ul style={style}> 
       { reactData } 
      </ul> 
     </div> 
     ) 
    } 
}); 

ReactDOM.render(
    <MainInterface/>, 
    document.getElementById('testid') 
); 

Answer 1

Umbenennen aptList bis AptList.

Andernfalls React betrachtet aptList als eine native HTML-Komponente und löst Warnungen für unbekannte HTML-Eigenschaften aus.

die link in der Ausnahmemeldung Siehe:

4. Sie eine Komponente ohne oberen Fall React verwenden. Reagieren Sie interpretiert es als DOM-Tag, weil ...