Question

我试图在这里和其他地方搜索一些答案，但我似乎找不到任何东西。我正在经历一个完整的堆栈反应＆＃39; 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} />
});

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

差异与直接对其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})

Answer 2

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

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

Answer 3

如果你使用（）那么你在后面只能有1个jsx组件。如果您使用{}，那么您可以拥有更多代码行，然后添加一个return语句来结束它。

Answer 4

所描述的问题似乎与()与{}无关： *在第一种情况下，您正在生成HTML代码; *在第二种情况下，您只是向Javascript控制台发送内容。

使用带有Reactjs的{。

4 个答案: