面试题：React服务端渲染中如何在条件逻辑中处理不同组件渲染

基本步骤

获取用户权限信息：在服务端渲染时，可以从请求头、cookie或者其他鉴权机制中获取用户权限相关信息。例如，可能通过JWT（JSON Web Token）解析出用户角色信息。
传递权限信息到组件：将获取到的用户权限信息传递给需要根据权限渲染不同内容的组件。可以通过React的props属性传递。
在组件中进行条件渲染：在组件内部，根据接收到的权限信息进行条件判断，决定渲染哪些内容。

关键代码示例

假设使用React和Express进行服务端渲染：

服务端（Express）

const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const app = express();

// 模拟从JWT获取用户权限信息（这里简化为硬编码）
const userRole = 'admin'; 

// 假设我们有一个App组件
const App = require('../client/src/App');

app.get('*', (req, res) => {
    const html = ReactDOMServer.renderToString(<App role={userRole} />);
    const page = `
        <!DOCTYPE html>
        <html>
            <head>
                <title>SSR Example</title>
            </head>
            <body>
                <div id="root">${html}</div>
            </body>
        </html>
    `;
    res.send(page);
});

const port = 3000;
app.listen(port, () => {
    console.log(`Server running on port ${port}`);
});

客户端（React组件）

import React from'react';

const App = ({ role }) => {
    return (
        <div>
            <h1>Content Based on User Role</h1>
            {role === 'admin' && <button>Add Article</button>}
            <ul>
                <li>Article 1</li>
                <li>Article 2</li>
                {/* 更多文章列表项 */}
            </ul>
        </div>
    );
};

export default App;

星途面试题库

面试题：React服务端渲染中如何在条件逻辑中处理不同组件渲染

知识考点

面试题答案

基本步骤

关键代码示例

服务端（Express）

客户端（React组件）