使用带有Reactjs的.map与{}和()之间的区别

Question

我试图在这里和其他地方搜索一些答案,但我似乎找不到任何东西.我正在经历一个'完整堆栈反应'PDF,在一个例子中,我们使用构建产品列表.map().但是他们这样使用它:

const allNames = names.map((name) => (
   <Name key={name.name} name={name.name} />
));

我习惯使用它的方式如下:

const allNames = names.map((name) => {
  <Name key={name.name} name={name.name} />
});

使用它第二种方式页面上没有显示任何内容.为什么是这样？我倾向于认为它与对象数组存储状态的方式有关.您可以在下面看到完整的代码.多谢你们.

class Name extends React.Component {
  render() {
    return (
      <li>{this.props.name}</li>
    );
  }
}

class NameList extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      names: [
        {
          name: 'dan' 
        },
        {
          name: 'fred' 
        }
      ]
    }
  }
  
  render() {
    const { names } = this.state;
    const allNames = names.map((name) => (
      <Name key={name.name} name={name.name} />
    ));
    
    return (
      <div className='class-list'>
        {/*<NewName addName={this.addName} />*/}
        <ul className='new-name'>
          {allNames}
        </ul>
      </div>
    );
  }
}

class FilteredNameList extends React.Component {
  render() {
    return (
      <div>
        <NameList 
          names={this.props.names}
        />
        {/*<FilterNames />*/}
      </div>
    );
  }
}

ReactDOM.render(
  <FilteredNameList />,
  document.getElementById('container')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="container"></div>

Answer 1

如果使用 () 那么接下来只能有 1 个 jsx 组件。如果使用 {} 则可以有更多行代码，然后添加 return 语句来结束它。

Answer 2

差异与直接反应其ES6 Arrow函数语法无关.

如果使用常规括号,则返回某个值是符合流行的

() => {return 'someValue';} 

等于

() => ('someValue')

(param1, param2, …, paramN) => { statements }
(param1, param2, …, paramN) => expression
// equivalent to: (param1, param2, …, paramN) => { return expression; }

// Parentheses are optional when there's only one parameter name:
(singleParam) => { statements }
singleParam => { statements }

// A function with no parameters should be written with a pair of parentheses.
() => { statements }

// Parenthesize the body of function to return an object literal expression:
params => ({foo: bar})

Answer 3

当箭头函数体以大括号开头时，箭头函数可以有多个语句，并且不会自动返回其中表达式的值。使用括号时，它只能有一个表达式，并且返回该表达式的值。

const names = ['A', 'B', 'C'];
const first = names.map(name => name.toLowerCase());
const second = names.map(name => {
  name.toLowerCase(); // Notice that this doesn't do anything
  // And you need a return statement to get a value back
  return 'X';
});

console.log(first);
console.log(second);