ReactJS – 警告：未知的道具

我创build了一个简单的应用程序来searchvideo使用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 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

React希望所有组件都以类格式写入。 这意味着名字需要大写。

searchItem需要是SearchItem

您还可以定义将在search项目上收到的道具

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