reactjs中的小括号是什么意思答案

【问题标题】：what do small brackets means in reactjsreactjs中的小括号是什么意思
【发布时间】：2020-01-12 12:02:39
【问题描述】：

const layout = (props) =>(
    <Aux>
    <div>Toolbar, SideBar, BAckdrop</div>
    <main>
       <p> hi </p>
    </main>
    </Aux>    
)

我的应用组件

class App extends Component {
  render() {
    return (
      <div>
        <Layout>
          <p>Test</p>
        </Layout>
      </div>
    );
  }
}

以下是我的 react 组件的代码并在我的 app.js 中呈现

1) 我已经用 { } 替换了代码，然后它显示错误，没有任何渲染或返回有意义，因为我们必须明确说明一些返回到您的组件，然后 () 括号如何返回而没有任何反应

2) 那么react中的()是什么意思

3) 我想知道上面的代码是否是一个箭头函数，它如何返回所有的 jsx 代码，因为在箭头函数中，如果我错了，我们只能返回一个正确的变量

【问题讨论】：

标签： reactjs components arrow-functions

【解决方案1】：

()是js中的separators，它们表示给定statement的隔离。 Components 必须明确地 return JSX。像这样

const Component = () =>{
    return <div />
}

单行arrow functions 隐含一个return statement

const Component () => <div />

但是当你想 return 一个多行的表达式时，你应该隔离它以表明它是一个单一的 statement

const Component = () => (
    <div>
        <div/>
   </div>
)

【讨论】：

所以这意味着我们将所有内容都分组到一个 div 中并隐式返回它而没有任何返回

【解决方案2】：

小括号()与React无关，它指的是JavaScript分隔符，更多信息请阅读expressions。

因为JSX 只是幕后的一个对象，你可以在一个表达式中返回一个ReactElement：

const layout = (props) => (<div>I'm Expression</div>)

// The same
const layout = (props) => <div>I'm Expression</div>

// Just multi-line expression
const layout = props => (
  <Aux>
    <div>Toolbar, SideBar, BAckdrop</div>
    <main>
      <p> hi </p>
    </main>
  </Aux>
);

【讨论】：

【解决方案3】：

1) 我已经用 { } 替换了代码，然后它显示错误，没有任何渲染或返回有意义，因为我们必须明确说明一些返回到您的组件，然后 () 括号如何返回而没有任何反应

2) 那么 () 在 react 中是什么意思

箭头函数允许我们直接返回一个值而无需显式地写“return”。但是，这仅在直接移动应在箭头之后评估的表达式时才有效。将“()”放在你的表达式周围只是对你的表达式进行分组，使其成为多行时的单个语句。

在箭头后放置“{}”时，您定义了一个函数体。函数体中的代码将被简单地执行。默认情况下，'undefined' 将是返回值，除非您实际使用 'return' 来返回值。

3) 我想知道上面的代码是否是一个箭头函数，它如何返回所有的 jsx 代码，因为在箭头函数中，如果我错了，我们只能返回一个正确的变量

没错，但从技术上讲，我们只返回一个值。 JSX 只是语法糖。实际结果将是嵌套的React.createElement() 调用的结果。

【讨论】：