Question

我在React Js中是超级新手，我在react组件的map方法中感到困惑。我正在使用react制作电影列表应用程序，并声明了名为movie的Object数组。我想使用map方法将道具传递给子组件。

但是，当我在map方法中不使用return（）进行编译时，出现了这样的错误。

import React, { Component } from 'react';
import './App.css';
import Movie from './Movie.js';


const movies = [
    {
        title:"Oldboy",
        poster:"https://upload.wikimedia.org/wikipedia/en/thumb/b/bb/Oldboy_2013_film_poster.jpg/220px-Oldboy_2013_film_poster.jpg"
    },
    {
        title:"Matrix",
        poster:"http://www.whatisthematrix.com/img/matrix.jpg"
    },
    {
        title:"Full Metal Jacket",
        poster:"https://images-na.ssl-images-amazon.com/images/I/41MN0ANVJTL._SY445_.jpg"
    },
    {
        title:"Hunger Game",
        poster:"https://m.media-amazon.com/images/M/MV5BMjA4NDg3NzYxMF5BMl5BanBnXkFtZTcwNTgyNzkyNw@@._V1_.jpg"
    }
];

class App extends React.Component {
  render() {
    return (
      <div className="App">
        {movies.map(movie => {
            <Movie title= {movie.title} poster={movie.poster}/>
        })};
      </div>
    );
  }
}

export default App;

但是，当我在map方法中使用return（）对其进行编译时，它运行成功。据我所知，在ES6中无需使用return。您能告诉我为什么会发生此错误吗？

Answer 1

需要将return与ES6箭头功能一起使用，否则它们将无法返回任何内容。

可以将

return关键字省略，而将隐式返回括起来：

movies.map(movie => <Movie title= {movie.title} poster={movie.poster}/>)

使用括号可以提高可读性：

movies.map(movie => (
    <Movie title= {movie.title} poster={movie.poster}/>
))

Answer 2

隐式返回仅在没有块{}时有效

当您在箭头后使用{}时，需要使用return

{movies.map(movie => { <Movie title= {movie.title} poster={movie.poster}/> })};

或者您可以使用()

{movies.map(movie => (
   <Movie title= {movie.title} poster={movie.poster}/>
 ))};

Answer 3

在ES6中，如果一个函数必须仅返回值，则您可以这样编写：

CMakeLists.txt

如果函数有更多任务要做，您可以这样使用：

# -- Building with C++11 support
set(CMAKE_C_COMPILER /usr/local/gcc-7.3/bin/gcc)
set(CMAKE_CXX_COMPILER /usr/local/gcc-7.3/bin/g++)

set(CMAKE_CXX_FLAGS "${CMAKE_CXX_FLAGS} -std=c++11")
set(CMAKE_INSTALL_PREFIX ${CMAKE_SOURCE_DIR}/binaries)

为什么我必须在ES6的地图闭合中使用return？

3 个答案: