Question

我正在尝试以简写形式呈现多个React组件，但它不能按预期工作。这是我的来源：

  render() {

    const isLoggedin = true; 

    return (
      <div>
        { isLoggedin ? 
            <Greeting />
            <LogoutButton /> 
          : <LoginButton />
        }
      </div>
    );
  }

如果我只使用一个组件，它可以工作（例如删除问候语）：

  render() {

    const isLoggedin = true; 

    return (
      <div>
        { isLoggedin ? 
            <LogoutButton /> 
          : <LoginButton />
        }
      </div>
    );
  }

有没有办法渲染它们？

Answer 1

您可以使用<div> </div>并在其中放置代码块。

e.g。

<div>
<Greeting />
<LogoutButton /> 
</div>

Answer 2

试试这个：

render() {

  const isLoggedin = true; 

  return (
    <div>
      { isLoggedin ? (
          <Greeting />
          <LogoutButton />
        ) : (
          <LoginButton />
        )
      }
    </div>
  );
}

如果条件，则以简写形式呈现多个React组件

2 个答案: