时间戳

首页 > 解决方案 > 理解 JSX 元素声明语法

reactjs - 理解 JSX 元素声明语法

问题描述

我见过两种在 JSX 中声明元素的不同方式。

第一个看起来如下。

const element = (
  <div>
    ...
  </div>
);

但我也看到了一个元素的以下声明。

const App = () => (
  <BrowserRouter>
    ...
  </BrowserRouter>
)

这两个元素都可以作为第一个参数传递给 ReactDOM.render()。

但是这两种语法到底有什么区别呢？

标签： reactjsjsx

解决方案

立即评估第一个。第二个是在渲染其父级时评估的。

这是之间的区别

let y = 1,
  x = y;

y = 2;

console.log(x); // prints 1

和

let y = 1,
  x = () => y;

y = 2;

console.log(x()); // prints 2

在设计可重用组件时，请使用第二种语法。当您在另一个组件的渲染中返回或包含一个组件时，请使用第一个。

推荐阅读