箭头函数中“=>”后面的圆括号

来源：3-6 动手实战

慕的地2495670

2019-01-19

const TotalPrice = ({ income, outcome }) => (
  <div className="row">
    <div className="col">
      <h5 className="income">收入:{ income }</h5>
    </div>
    <div className="col">
      <h5 className="outcome">支出:{ outcome }</h5>
    </div>
  </div>
)

我查了一下ES6当中，直接return的可以不带括号，但是多于一句的语句的时候要用花括号。
为什么这里的剪头函数的“=>”后面是圆括号而不是花括号或者不带括号呢？

写回答

1回答

张轩

2019-01-21

已采纳

让我们把这个分开看看欧 , 我们先不使用简写，你可以看到多行 JSX 是可以这么直接写的，你说的多行语言是 Javascript 语句，但是 JSX 是可以的

const TotalPrice = ({ income, outcome }) => {
    return 
      <div className="row">
        <div className="col">
          <h5 className="income">收入:{ income }</h5>
        </div>
        <div className="col">
          <h5 className="outcome">支出:{ outcome }</h5>
        </div>
      </div>
}

所以我们可以简写成你提问的样子是没有问题的

慕的地2495670

非常感谢！

2019-01-22

共1条回复

React16组件化+测试+全流程实战在线账本项目

轻松上手，从设计图到上线，精通组件化思维和组件测试

713 学习 · 177 问题

查看课程

相似问题

老师，onClick={this.toggleDropDown}>后面什么时候要加括号如下？

回答 1