Javascript 什么'；在React中呈现多个列表项之一的子项的有效方法是什么？

我有一个组件，它可以呈现一些列表项，当单击父列表项时，其中一些可能在

标记中包含另一组子项

这是一个相当大的数据集，那么在单击父列表项时，如何有效地呈现（并在第二次单击时销毁）子项呢

示例代码如下：

const Timeline = ({ edges }) => {

    const getChildren = async id => {
        
    }

    return (
        <ul className={styles.timeline}>
            {edges.sort((a, b) => formatDate(a.node.date) - formatDate(b.node.date)).map(({ node }, index) => (
                <li key={node.id} className="timeline-item">
                    {!node.children.edges.length > 0 ? (
                        <a className="timeline-item-link" onClick={() => getChildren(node.id)}>
                            <h2 className="timeline-item-title">{node.title}</h2>
                        </a>
                        <ul className="timeline-children"></ul>
                    ) : null}
                </li>
            ))}
        </ul>
    )

}

const Timeline=（{edges}）=>{
const getChildren=async id=>{
}
返回(

{edges.sort（（a，b）=>formatDate（a.node.date）-formatDate（b.node.date））.map（{node}，index）=>(

{！node.children.edges.length>0(
getChildren（node.id）}>
{node.title}

)：null}

))}

)
}

---

任何帮助都将不胜感激

最重要的是，您需要使每个父元素都成为自己的组件。否则，react需要在任何更改时重新提交整个列表。比如：

const Timeline = ({ edges }) => {
    return (
        <ul className={styles.timeline}>
            {edges.sort((a, b) => formatDate(a.node.date) - formatDate(b.node.date)).map(({ node }, index) => (
                <TimelineChild node={node} key={index} />
            ))}
        </ul>
    )
}


const TimelineChild = ({ node }) => {
    const getChildren = async id => {
        
    }
    
    return (<li key={node.id} className="timeline-item">
                    {!node.children.edges.length > 0 ? (
                        <a className="timeline-item-link" onClick={() => getChildren(node.id)}>
                            <h2 className="timeline-item-title">{node.title}</h2>
                        </a>
                        <ul className="timeline-children"></ul>
                    ) : null}
                </li>);
}

const Timeline=（{edges}）=>{
返回(

{edges.sort（（a，b）=>formatDate（a.node.date）-formatDate（b.node.date））.map（{node}，index）=>(
))}

)
}
const TimelineChild=（{node}）=>{
const getChildren=async id=>{
}
return（

{！node.children.edges.length>0(
getChildren（node.id）}>
{node.title}

)：null}
）；
}

---

您可能还希望为所有的

节点.子节点

提供自己的组件。

谢谢，您知道如何在单击父节点时呈现子列表项吗？如果您已经加载了子节点（如

节点.子节点.边

所建议的），您可以简单地切换

使用状态

布尔值。如果需要动态加载它们（如

getChildren

所建议的），那么应该

useState

一个数组。