React中JSX返回多个组件函数仅执行最后一个问题求助

你在React组件return语句里用了逗号运算符，这个运算符的特性是会依次执行每个表达式，但最终只返回最后一个表达式的结果。所以loadingMessage()、errorMessage()、loginForm()虽然会被调用，但它们返回的JSX不会被React渲染，只有最后一个performRedirect()的结果会被渲染到页面上。

React要求组件的return只能返回单个JSX元素，你需要把多个元素包裹在一个容器里，以下是几种可行的方式：

方法1：使用React Fragment（推荐） #

Fragment可以在不生成额外DOM节点的前提下包裹多个元素，语法用<></>即可：

return (
  <>
    {loadingMessage()}
    {errorMessage()}
    {loginForm()}
    {performRedirect()}
  </>
)

方法2：用数组包裹 #

把所有函数返回的JSX放进数组中，注意如果是动态生成的元素需要加唯一key属性，静态调用的场景可以省略：

return [
  loadingMessage(),
  errorMessage(),
  loginForm(),
  performRedirect()
]

方法3：用父DOM元素包裹 #

用一个<div>或其他容器元素把所有内容包起来，缺点是会多生成一个不必要的DOM节点：

return (
  <div>
    {loadingMessage()}
    {errorMessage()}
    {loginForm()}
    {performRedirect()}
  </div>
)

• performRedirect函数在不满足跳转条件时会返回undefined，React不会渲染undefined，但可以明确返回null让代码逻辑更清晰。
• 注意代码里isAutheticated的拼写（正确应为isAuthenticated），如果是拼写错误建议修正，避免后续出现潜在问题。

内容的提问来源于stack exchange，提问作者Noor