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

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

searchItem必须为SearchItem

您还可以定义将在搜索项

上收到的道具

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

ReactJS - 警告：未知道具

1 个答案: