通过道具将功能传递给组件 - REACT

Question

我试图将'handleItemClick'功能从'Dropdown'组件传递到他们'Team'组件,但是,我无法通过'List'组件.奇怪的是,当我在'List'中记录道具时,它说'itemClick'在'this.props'对象中,然而当我将它设置为'Team'组件上的道具时,它说"无法读取未定义的属性'itemClick'.

任何帮助将非常感激.

下拉组件:

var Dropdown = React.createClass({
    getInitialState: function(){
        return {
            display: false
        };  
    },
    handleClick: function(e){
        this.setState({display: !this.state.display})
    },
    handleItemClick: function(e){
        console.log("Something");
    },
    render: function(){
        return (
            <div className="dropdown">
                <Button whenClicked={this.handleClick} className="btn-default" title={this.props.data.title} number={this.props.data.teams.length} />
                <List teams={this.props.data.teams} display={this.state.display} itemClick={this.handleItemClick}/>
            </div>
        );   
    }
});

列表组件:

var List = React.createClass({
    render: function(){
        console.log(this.props)
        var teams = this.props.teams.map(function(team){
            return <Team key={team} team={team} teamChoice={this.props.itemClick}  />
        });

        var displayStyle = {
            display: this.props.display ? 'block' : 'none'
        };

        return (
            <ul style={displayStyle} className="dropdown-menu">
                {teams}
            </ul>
        );
    }
});

Answer 1

Kristofen44很接近:

Array.prototype.map()this在其回调中丢失来自父范围的内容.但该函数包含一个用于this在其中访问的变量输入:

var teams = this.props.teams.map(function(team){
    return <Team key={team} team={team} teamChoice={this.props.itemClick}  />
}, this);