Question

通常我会这样做：

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

...但是显然我不能在功能组件中使用此代码

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

通常最好的处理方式是什么？

Answer 1

如果它是功能组件，则您将登录状态保存为这样的状态。

用登录状态替换（状态）为真

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

代码

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

Answer 2

使用片段

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

Answer 3

功能组件仅仅是一个功能，可以通过经典的import React, { useEffect, useState } from "react"; import "./styles.css"; const wait = ms => new Promise((r, j) => setTimeout(r, ms)); const test2 = () => { const [test, setTest] = useState("hi"); useEffect(() => { const testf = async stillMounted => { await wait(1000); setTest("bye"); }; const stillMounted = { value: true }; testf(stillMounted); return () => { stillMounted.value = false; }; }, []); return test; }; export default function App() { const here = test2(); const stru = [{ id: "whatever", content: here }]; const [elements, setElements] = useState(stru); console.log(stru); console.log(elements); return ( <div className="App"> <h1>stru: {stru[0].content}</h1> <h2>elements: {elements[0].content}</h2> </div> ); }语法或ES6箭头语法（function(){}）进行定义。

您可以在ES6箭头功能中使用() => {}语句，但不必这样做。为了减少样板，我倾向于避免使用它们。

遵循这些原则的方法应该起作用，例如：

return

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

3 个答案: