Reactjs 如何在React中的功能组件中执行条件渲染？

通常我会这样做：

render() {
   const isLoggedIn = this.state.isLoggedIn;
   return (
      <div>
         {isLoggedIn ? (
            <LogoutButton onClick={this.handleLogoutClick} />
         ) : (
        <LoginButton onClick={this.handleLoginClick} />
        )}
      </div>
    );
 }

render（）{
const isLoggedIn=this.state.isLoggedIn；
返回(
{伊斯洛格丁(
) : (
)}
);
}

。。。但很明显，我不能在功能组件中使用这些代码

export const LoginContainer = () { 
   {if <-- CRASH!   
}

export const LoginContainer=（）{
{if如果它的功能组件和您保存loggedinstatus到如下状态

将（状态）true替换为您的loggedin状态

const [state, setState]=React.useState(true);

代码

export const LoginContainer=（）=>{
const isLoggedIn=状态；
返回(
{伊斯洛格丁(
) : (
)}
);
}
使用片段

export const LoginContainer = () => { 
  <>
   {if <-- CRASH!
  </>
}

export const LoginContainer=（）=>{
{if函数组件只是一个函数，它可以通过经典的
function（）{}
语法或ES6箭头语法（
（）=>{}
）定义

您可以在ES6 arrow函数中使用
return
语句，但您不必这样做。我倾向于尽可能避免使用它们，以减少样板文件

按照这些思路应该可以做到，例如：

export const LoginContainer=（{handleLogoutClick，handleLoginClick}）=>{
const[state，setState]=useState（true）
返回(
)
}
你看过了吗？据我所知，它们是传统的react组件（带有render方法）。你不能在功能组件中使用return语句，所以我认为这不起作用？是的，你是对的。userState钩子需要在主体中。
export const LoginContainer = () => { 
  <>
   {if <-- CRASH!
  </>
}