小括号在reactjs中意味着什么

Question

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) 我用 { } 替换了代码，然后它显示错误，没有任何渲染或 return 有意义，因为我们必须明确地对您的组件说一些 return 那么 () 括号是return没有任何反应

2) 那么 () 在 react 中意味着什么

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

Answer 1

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

因为 JSX 只是幕后的一个对象，您可以 return 一个 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>
);

Answer 2

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

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

单行arrow functions有一个隐含的return statement

const Component () => <div />

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

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

Answer 3

1) I have replaced the code with { } then it showed error nothing render or return make sense because we have to explicitly say some return to your component then how () brackets are returning without any react

2) so what do () in react means

箭头函数允许我们直接return一个值而不用显式写'return'。但是，这仅在直接移动应在箭头后计算的表达式时才有效。在您的表达式周围放置“()”只是将您的表达式分组，使其在多行时成为单个语句。

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

3) I am wondering if the above code is an arrow function how can it return all the jsx code because in arrow function we are able to return only one variable correct be if i am wrong

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

小括号在reactjs中意味着什么

what do small brackets means in reactjs

components

reactjs

arrow-functions