React.js与{}和()之间的区别 [英] Difference between {} and () with .map with Reactjs

问题描述

我试图在这里和其他地方搜索一些答案，但似乎什么也找不到.我正在阅读全栈反应" PDF，在一个示例中，我们使用 .map()建立了一个产品列表.但是他们这样使用它:

I've tried to search around on here and other places for some answers, but I can't seem to find anything. I'm going through a 'full stack react' PDF and in one example we build out a product list using .map(). But they use it like this:

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

我曾经在这样的地方使用它:

Where I'm used to using it like this:

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

使用第二种方法，页面上什么也不会显示.为什么是这样?我倾向于认为这与对象数组在状态中存储的方式有关.您可以在下面看到完整的代码.谢谢大家.

Using it the second way nothing is shown on the page. Why is this? I'm inclined to think it has something to do with the way the array of objects is stored in state. You can see the full code below. Thanks guys.

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>

推荐答案

差异与直接响应其

The difference is not related to react directly its ES6 Arrow functions syntax.

如果使用常规括号，则等于返回某个值，所以

If you use regular parenthesis, it is equevalent to returning some value so

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

这篇关于React.js与{}和()之间的区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！