面试题：React中如何高效渲染多层嵌套列表

Question

假设有一个多层嵌套的JSON数据结构表示一个目录树，例如：{name: 'root', children: [{name: 'child1', children: [{name: 'grandchild1'}]}]} ，请使用React实现该目录树的渲染，要求点击每个节点能展开或收起其子节点，简要描述思路并给出关键代码片段。

Answer 1

思路

1. 数据处理：将JSON数据结构作为组件的初始状态或通过props传入。
2. 组件设计：创建一个目录树组件，使用递归方式渲染每个节点。
3. 状态管理：为每个节点添加一个状态来记录其展开或收起状态，通过点击事件改变该状态。

关键代码片段

import React, { useState } from 'react';

const TreeNode = ({ node }) => {
    const [isExpanded, setIsExpanded] = useState(false);

    const toggleExpand = () => {
        setIsExpanded(!isExpanded);
    };

    return (
        <div>
            <div onClick={toggleExpand}>
                {node.name}
                {node.children && (
                    <span>{isExpanded ? '[-]' : '[+]'}</span>
                )}
            </div>
            {isExpanded && node.children && (
                <div>
                    {node.children.map((child, index) => (
                        <TreeNode key={index} node={child} />
                    ))}
                </div>
            )}
        </div>
    );
};

const DirectoryTree = ({ data }) => {
    return (
        <div>
            <TreeNode node={data} />
        </div>
    );
};

export default DirectoryTree;

使用时，传入JSON数据结构：

import React from 'react';
import DirectoryTree from './DirectoryTree';

const jsonData = { name: 'root', children: [{ name: 'child1', children: [{ name: 'grandchild1' }] }] };

const App = () => {
    return (
        <div>
            <DirectoryTree data={jsonData} />
        </div>
    );
};

export default App;