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

IT技术 javascript reactjs
2021-04-02 14:24:05

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

4个回答

区别与直接react其ES6 箭头函数语法无关。

如果使用正则括号，则相当于返回一些值，因此 

() => {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})
嗯，在阅读“如果您使用正则括号，它等同于使用 {return 'someValue';}”后，这很有意义。谢谢！
2021-06-11 14:24:05

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

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

将其更新console.log为我实际尝试过的内容。感谢您的回答，现在确实有意义。
2021-06-12 14:24:05

如果您使用 ()，那么您只能在以下内容中使用 1 个 jsx 组件。如果您使用 {}，那么您可以拥有更多的代码行，然后添加一个 return 语句来结束它。

将 console.log 行更新为我在代码中实际尝试的内容。现在完全有道理，也感谢您的回答。
2021-05-30 14:24:05

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

这只是我将如何使用它的一个快速示例，但如果我将相同的语法应用于反应代码，我将一无所获。我会尽快编辑帖子。
2021-06-18 14:24:05
其它你可能感兴趣的问题
上一篇React 将 this 绑定到类方法 下一篇如何在reactjs中下载图像？