JSX：JavaScript表达式何时计算？

在阅读了GatsbyJS和React教程之后，我得到的印象是，JavaScript表达式总是在JSX的{}括号内进行计算。但现在我看的是GatsbyJS starter repo中的一个JSX文件，其中括号会导致不同的行为：

const {
    data: {
      posts: { edges: posts },
      site: {
        siteMetadata: { facebook }
      }
    }
} = props;

（）

---

根据教程，“facebook”应该被评估为JavaScript，并且应该返回未定义的，但事实并非如此。不知何故，我们最终得到了一个JavaScript对象data.site.sitemata.facebook，其中包含一些数据。这是怎么回事？为什么“facebook”不作为JavaScript表达式计算？

您复制的代码实际上与JSX无关（见下文）。这是ES6，就像@PrithvirajSahu对这个问题的评论一样

假设您有这样一个对象：

const obj = {
  a: 100, 
  b: { 
    value: 200,
  } 
};

<div className="container">
  Hello
  {"Happy"}
  World
</div>

可以获得如下所示的内部值：

const { a } = obj; 
// same as const a = obj.a

const { b: c } = obj; 
// same as const c = obj.b

const { b: { value } } = obj; 
// same as const value = obj.b.value

const { b: { value: v } } = obj; 
// same as const v = obj.b.value

const { a, { b: { value } } } = obj; 
// same as 
// const a = obj.a; 
// const value = obj.b.value;

回到你的代码，它相当于

const posts = props.data.posts.edges;
const facebook = props.data.site.siteMetadata.facebook;

正如您所发现的，在1到2个级别上，解构语法非常简洁，但是如果有更多级别，则很难阅读。就我个人而言，我只在1级使用它

---

编辑：在源代码的函数中，只有以

{
如果（！hasDate）返回空值；
返回
}
//在渲染函数中
返回(
{showDate（hasDate）}
)

我们还可以使用括号将值传递给元素的道具：

<div 
  style={ { color: 'red' } }
  onClick={ (event) => {...} }>
  { hasDate && <Date /> }
<div>

{…}}>
{hasDate&&}

我认为您是对的，它是根据一个值进行评估和分配的。小挑剔：你说代码与JSX无关。是的。它在一个JSX文件中，我的问题是，尽管有括号，为什么它没有作为JavaScript进行评估。嘿@AtteJuvonen，我对上面的答案进行了编辑，以澄清问题。当文件名为

.jsx

时，通常向编译器表明文件内容将具有jsx语法-这并不意味着文件中的所有内容都是jsx。在您共享的函数中，只有

部分是JSX语法

{}

是一种从JSX转义的方法，因此您可以放入普通的JS代码。但其他任何地方都是正常的。如果您将此解构代码放在

.jsx

之外，并放入一个正常的ES6

.js

文件中，它就会工作。嘿，非常感谢。还有一件事：看起来我不能把“普通JS”放进去。例如，如果我输入

“if（true）{console.log（“hey”）}”

，它会抱怨语法错误。hey@AtteJuvonen！我的错，这实际上不是正常的js本身——让我再编辑一下答案。但简而言之，JSX将被编译为

React.createElement（）

，这意味着您只能传入值或函数；但不是文字代码块。如果您将该代码提取到一个函数中，然后在jsx内部调用该函数，它就会工作

React.createElement(
  "div",
  { className: "container" },
  "Hello",
  "Happy",
  "World"
);

<div>
  { hasDate && <Date /> }
<div>

// somewhere in the code
const showDate = (hasDate) => {
  if (!hasDate) return null;
  return <Date />
}

// in the render function
return (
  <div>
    { showDate(hasDate) }
  <div>
)

<div 
  style={ { color: 'red' } }
  onClick={ (event) => {...} }>
  { hasDate && <Date /> }
<div>