为什么在 React 中将 props 的数组映射移到渲染函数之外不起作用？

Question

下面的例子很好用，我在渲染函数中映射了 props 数组。

class Calendar extends Component {
    render(){
        return(
           <div>
                { this.props.events.map((event, idx) => {
                    return <li key={idx}>{event.title}</li>
                })}

            </div>
        );
    }
}

但是当我将数组映射移动到另一个函数时不再起作用。

class Calendar extends Component {

    handleEvents(){
        this.props.events.map((event, idx) => {
            return <li key={idx}>{event.title}</li>
        })
    }
    render(){
        return(
            <div>
                { this.handleEvents() }
            </div>
        );
    }
}

任何帮助将不胜感激。

Answer 1

我猜你只是忘了从你的函数中返回

class Calendar extends Component {

    handleEvents(){
        // here.
        return this.props.events.map((event, idx) => {
            return <li key={idx}>{event.title}</li>
        })
    }
    render(){
        return(
            <div>
                { this.handleEvents() }
            </div>
        );
    }
}