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

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

我猜你只是忘了 return 从你的函数

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>
        );
    }
}

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

Why does moving the array map of props outside the render function not work in React?

jsx

reactjs

es6-map