javascript - {} 和 () 与 .map 与 Reactjs 的区别

Question

我试图在这里和其他地方搜索一些答案，但我似乎找不到任何东西。我正在浏览“全栈 react ”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

区别与直接 react 其ES6 Arrow functions无关句法。

如果你使用正则括号，它相当于返回一些值，所以

() => {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})