react条件渲染返回多组件问题

Question

react官网有相关的条件渲染，如下：

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

ReactDOM.render(
  // 修改为 isLoggedIn={true} 试试:
  <Greeting isLoggedIn={false} />,
  document.getElementById('root')
);

现在我的问题是，我返回的组件不止一个，如下所示：

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return (<UserGreeting /><UserGreeting /><UserGreeting /><UserGreeting />);
  }
  return (<GuestGreeting /><UserGreeting /><UserGreeting />);
}

由此编译就会产生错误，请问如果想在条件渲染的时候返回多个组件如何做？

Answer 1

已经解决了，外层包裹一层就可以了，如下：

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return (<div><UserGreeting /><UserGreeting /><UserGreeting /><UserGreeting /></div>);
  }
  return (<div><GuestGreeting /><UserGreeting /><UserGreeting /></div>);
}

Answer 2

<div><UserGreeting /><UserGreeting /><UserGreeting /><UserGreeting /></div>

JSX 需要包装在一个闭合标签内。