Reactjs 如何将JSX设置为变量，以便优化代码？

我是一个新的反应和工作的副项目，以了解它更多。我有3个条件返回相同的JSX，我试图将JSX设置为一个变量并显示它，但我一直收到一个错误“对象作为React子对象无效（找到：具有键{restaurantCard}的对象）”。我的目标是优化代码，并在每个相应的条件中输出变量restaurantCard

这是我的密码：

  // Our JSX that shows our restaurant
  let restaurantCard = (
    <div className="game">
      <RejectButton handleRejectClick={handleRejectClick} />
      {/* Chooses a random restaurant to view in our remaining restaurants */}
      <Card 
        yelpResults={yelpResults[1]}
        // yelpResults={yelpResults[restaurantIndexes[Math.floor(Math.random() * restaurantIndexes.length)]]}
      />
      <ApproveButton handleApproveClick={handleApproveClick} />
    </div>
  )

  // Show Approve Route
  if (showApprove === true) {
    console.log('Approve Render')
    console.log(`Restaurant Indexes: ${restaurantIndexes}`);
    console.log(`Random Restaurant Index: ${restaurantIndexes[Math.floor(Math.random() * restaurantIndexes.length)]}`);
    return (
      <div className="game">
        <RejectButton handleRejectClick={handleRejectClick} />
        {/* Chooses a random restaurant to view in our remaining restaurants */}
        <Card 
          yelpResults={yelpResults[restaurantIndexes[Math.floor(Math.random() * restaurantIndexes.length)]]}
        />
        <ApproveButton handleApproveClick={handleApproveClick} />
      </div>      
    )
    // Show Reject Route
  } else if (showReject === true) {
      console.log('Reject Render')
      console.log(`Restaurant Indexes: ${restaurantIndexes}`);
      return (
        <div className="game">
          <RejectButton handleRejectClick={handleRejectClick} />
          {/* Chooses a random restaurant to view in our remaining restaurants */}
          <Card 
            yelpResults={yelpResults[restaurantIndexes[Math.floor(Math.random() * restaurantIndexes.length)]]}
          />
          <ApproveButton handleApproveClick={handleApproveClick} />
        </div>      
      )
  // If yelpResults does not have data for some reason this is our error handling content
  } else if (Object.keys(yelpResults).length === 0) {
    console.log('Error Handling')
    console.log(`Restaurant Indexes: ${restaurantIndexes}`);
    return (
      <div>
        Website was refreshed, you have to click "Home" and restart.
      </div>
    )
    // Our initial render, meaning no buttons were clicked and no error
  } else {
      console.log('Initial Render')
      console.log(`Restaurant Indexes: ${restaurantIndexes}`);
      return ({restaurantCard})
        // <div className="game">
        //   <RejectButton handleRejectClick={handleRejectClick} />
        //   {/* Chooses a random restaurant to view in our remaining restaurants */}
        //   <Card 
        //     yelpResults={yelpResults[1]}
        //     // yelpResults={yelpResults[restaurantIndexes[Math.floor(Math.random() * restaurantIndexes.length)]]}
        //   />
        //   <ApproveButton handleApproveClick={handleApproveClick} />
        //   {restaurantCard}
        // </div>
      
  }

//展示我们餐厅的JSX
let restaurantCard=(
{/*随机选择一家餐厅，在我们剩余的餐厅观看*/}
)
//显示批准路线
如果（showApprove==真）{
console.log（'Approve Render'）
log（`restaurantIndexes:${restaurantIndexes}`）；
log（`Random restaurantindex:${restaurantindex[Math.floor（Math.Random（）*restaurantindex.length）]}`）；
返回(
{/*随机选择一家餐厅，在我们剩余的餐厅观看*/}
)
//显示拒绝路线
}else if（showReject==true）{
console.log（'拒绝呈现'）
log（`restaurantIndexes:${restaurantIndexes}`）；
返回(
{/*随机选择一家餐厅，在我们剩余的餐厅观看*/}
)
//如果yelpResults由于某种原因没有数据，这就是我们的错误处理内容
}else if（Object.keys（yelpruslts.length==0）{
console.log（'错误处理'）
log（`restaurantIndexes:${restaurantIndexes}`）；
返回(
网站已刷新，您必须单击“主页”并重新启动。
)
//我们的初始渲染，意味着没有单击任何按钮，也没有错误
}否则{
console.log（'初始呈现'）
log（`restaurantIndexes:${restaurantIndexes}`）；
返回（{restaurantCard}）
// 
//   
//{/*随机选择一家餐厅，在我们剩余的餐厅观看*/}
//   
//   
//{restaurantCard}
// 
}

请尝试移除

{}

大括号，看看是否有帮助

例如，

returnrestaurantcard

编辑：根据注释的要求，花括号只能在JSX内部使用

例如

const myName=“Kevin”；
返回{myName}；
请尝试移除
{}
大括号，看看是否有帮助

例如，
returnrestaurantcard

编辑：根据注释的要求，花括号只能在JSX内部使用

例如

const myName=“Kevin”；
返回{myName}；
当变量嵌套在JSX中时，您只需要在变量周围使用大括号。当你还饭馆卡的时候，那只是普通的JS。因此，您只需返回（restaurantCard）

编辑：

应@Subrato的请求，这里有一个简短的示例来帮助说明这一点：

// This is a just a regular Javascript variable. No need for special curly braces
let restaurantName = "Mr Magoo's eatery";

// The restaurantCard variable itself is just a plain JS variable
// However, its CONTENTS are JSX
let restaurantCard = (
    <div className="restaurant__card">
        {restaurantName} // This is a variable inside JSX, so it needs curly braces
    </div>
)

// As mentioned above, restaurantCard itself is just a plain JS variable
// So we can return it as normal
return restaurantCard;

//这只是一个常规Javascript变量。不需要特殊的花括号
let restaurantName=“马古先生餐厅”；
//restaurantCard变量本身只是一个普通的JS变量
//但是，它的内容是JSX
let restaurantCard=(
{restaurantName}//这是JSX中的一个变量，因此需要大括号
)
//如上所述，restaurantCard本身只是一个普通的JS变量
//所以我们可以把它恢复正常
返回餐厅卡；
当变量嵌套在JSX中时，您只需要在变量周围使用大括号。当你还饭馆卡的时候，那只是普通的JS。因此，您只需返回（restaurantCard）

编辑：

应@Subrato的请求，这里有一个简短的示例来帮助说明这一点：

// This is a just a regular Javascript variable. No need for special curly braces
let restaurantName = "Mr Magoo's eatery";

// The restaurantCard variable itself is just a plain JS variable
// However, its CONTENTS are JSX
let restaurantCard = (
    <div className="restaurant__card">
        {restaurantName} // This is a variable inside JSX, so it needs curly braces
    </div>
)

// As mentioned above, restaurantCard itself is just a plain JS variable
// So we can return it as normal
return restaurantCard;

//这只是一个常规Javascript变量。不需要特殊的花括号
let restaurantName=“马古先生餐厅”；
//restaurantCard变量本身只是一个普通的JS变量
//但是，它的内容是JSX
let restaurantCard=(
{restaurantName}//这是JSX中的一个变量，因此需要大括号
)
//如上所述，restaurantCard本身只是一个普通的JS变量
//所以我们可以把它恢复正常
返回餐厅卡；

当我们需要使用

{}

时，你能给出一个典型的例子吗？@SubratoPatnaik，当我们需要使用

{}

时，你能给出一个基本的例子吗，添加了一个基本示例，说明何时变量值需要大括号，何时变量值不需要大括号，当我们需要使用

{}

？const myName=“Kevin”时，您可以给出一个典型示例；返回{myName}；当我们需要使用

{}

？const myName=“Kevin”时，您能给出一个典型的例子吗；返回{myName}；