ReactJS - 警告：未知道具

Question

我創建了一個簡單的應用程序使用YouTube的API來搜索視頻，但是當我使用npm start它並沒有給我任何錯誤，但給我的警告Warning: Unknown prop onItemSearched on <searchItem> tag. Remove this prop from the element. in searchItem (created by listItem) in div (created by listItem) in listItem

這裏是我的代碼：

var React = require('react'); 
var Item = require('./item.jsx'); 
var searchItem = React.createClass({ 
    getInitialState : function() { 
     return { 
      'queryString' : '' 
     }; 
    }, 
    handleSearchClicked : function() { 
     this.props.onItemSearched(this.state); 

     this.setState({ 
      'queryString' : '' 
     }); 
    }, 

    handleChangedNameItem : function(e) { 
     e.preventDefault(); 
     this.setState({ 
      'queryString' : e.target.value 
     }); 
    }, 

    render : function() { 
     return (
      <div> 
       <label> 
        <input id="query" type="text" onChange={this.handleChangedNameItem} value={this.state.queryString} placeholder="Search videos..." /> 
        <button id="search-button" onClick={this.handleSearchClicked}>Search</button> 
       </label> 
      </div> 
     ); 
    } 
}); 

這是什麼樣的listItem我展示我的結果

var listItem = React.createClass({ 
    getInitialState : function() { 
     return { 
      'results' : [] 
     }; 
    }, 

    handleQuerySearch : function(query) { 
     var req = gapi.client.youtube.search.list({ 
      'part': 'snippet', 
      'type': 'video', 
      'q' : encodeURIComponent(query).replace(/%20/g, "+"), 
      'order' : 'viewCount', 
     }); 

     //execute request 
     req.execute((res) => { 
      var results = res.result; 
      this.setState({ 
       'results' : results.items 
      }); 
     }); 
    }, 

    render : function() { 
     var listItem = this.state.results.map(item => { 
      return(
       <Item title={item.snippet.title} videoid={item.id.videoId} /> 
      ); 
     }); 

     return (
      <div> 
       <searchItem onItemSearched={this.handleQuerySearch} /> 
       <div className="list-item"> 
        {listItem} 
       </div> 
      </div> 
     ); 
    } 
}); 

module.exports = listItem; 

Answer 1

陣營希望所有組件以課堂形式編寫。這意味着名稱需要大寫。

searchItem必須SearchItem

您也可以定義將在搜索項

var SearchItem = React.createClass({ 
    propTypes: { 
     onItemSearched: React.PropTypes.func 
    }, 
    .... 
});