面试题：React中如何通过条件渲染实现动态切换组件

Question

请描述在React中使用条件渲染动态切换组件的常见方法，并给出一个简单示例代码，比如根据一个布尔值来切换显示`Login`组件和`Dashboard`组件。

Answer 1

常见方法

1. 三元运算符：简洁地根据条件在两个组件间切换。
2. 逻辑与（&&）运算符：适合在条件为真时渲染一个组件，条件为假时不渲染任何内容。
3. if - else语句：在条件判断复杂时使用，更具灵活性。

示例代码（使用三元运算符）

import React from 'react';

const Login = () => <div>这是登录组件</div>;
const Dashboard = () => <div>这是仪表盘组件</div>;

const App = () => {
    const isLoggedIn = true; // 假设用户已登录
    return (
        <div>
            {isLoggedIn ? <Dashboard /> : <Login />}
        </div>
    );
};

export default App;

示例代码（使用逻辑与（&&）运算符）

import React from 'react';

const Login = () => <div>这是登录组件</div>;
const Dashboard = () => <div>这是仪表盘组件</div>;

const App = () => {
    const isLoggedIn = true; // 假设用户已登录
    return (
        <div>
            {isLoggedIn && <Dashboard />}
            {!isLoggedIn && <Login />}
        </div>
    );
};

export default App;

示例代码（使用if - else语句）

import React from 'react';

const Login = () => <div>这是登录组件</div>;
const Dashboard = () => <div>这是仪表盘组件</div>;

const App = () => {
    const isLoggedIn = true; // 假设用户已登录
    let content;
    if (isLoggedIn) {
        content = <Dashboard />;
    } else {
        content = <Login />;
    }
    return (
        <div>
            {content}
        </div>
    );
};

export default App;