Javascript 如何使用单独的函数动态组合React组件？

我有一个函数，它沿着一个简单的树向下走，并在每个步骤调用函数来打印菜单：

renderMenuFx(menu, renderFx) {
    renderFx.startMenu()
    for (const entry of menu) {
        renderFx.startEntry()
        renderFx.renderEntry(entry.path.join(""), entry.title)
        if (entry.menuEntries) {
            this.renderMenuFx(entry.menuEntries, renderFx)
        }
        renderFx.endEntry()
    }
    renderFx.endMenu()
}

当登录到控制台时，它会工作：

this.renderMenuFx(tree, {
    startMenu() { console.log('<ul>') },
    endMenu() { console.log('</ul>') },
    startEntry() { console.log('<li>') },
    endEntry() { console.log('</li>') },
    renderEntry(path, title) { console.log(`<a href="${path}">${title}</a>`) },
})

this.renderMenuFx（树{
startMenu（）{console.log（'
'）}，
endMenu（）{console.log（'
'）}，
startEntry（）{console.log（'
'）}，
endEntry（）{console.log（'
'）}，
renderEntry（路径，标题）{console.log（``）}，
})

但当我尝试在React中渲染它时，情况并非如此：

<div>

{
    f.renderMenu(this.tree, {
        startMenu() { return ( <ul> ) },
        endMenu() { return ( </ul> ) },
        startEntry() { return ( <li> ) },
        endEntry() { return ( </li> ) },
        renderEntry(path, title) { return ( <a href={path}>{title}</a> ) },
    })
}

</div>

{
f、 renderMenu（this.tree{
startMenu（）{return（
）}，
endMenu（）{return（
）}，
startEntry（）{return（
）}，
endEntry（）{return（
）}，
renderEntry（路径，标题）{return（）}，
})
}

实际上，问题是它没有编译，给出：

./src/components/Menu/MenuDyn.js
Syntax error: Unexpected token (141:37)

  139 |                     f.renderMenu(this.tree, {
  140 |                         startMenu() { return ( <ul> ) },
> 141 |                         endMenu() { return ( </ul> ) },
      |                                     ^

/src/components/Menu/MenuDyn.js
语法错误：意外标记（141:37）
139 | f.renderMenu（这棵树{
140 | startMenu（）{return（
）}，
>141 | endMenu（）{return（
）}，
|                                     ^

---

我显然做错了：处理这种情况的正确方法是什么？

开始实验的简单示例：

在某些

类组件中

render () {
  return (
    <ul>
      {this.props.menu.map((entry) => (
        <Entry key={entry.id} data={entry}></Entry>
      ))}
    </ul>
  )
}

render（）{
返回(

{this.props.menu.map（（条目）=>(
))}

)
}

渲染（功能）子组件：

const Entry = props => (
  <li>
    {props.data.title}
    {props.data.menuEntries && (
      <Menu menu={props.data.menuEntries} />
    )}
  </li>
)

const Entry=props=>(

{props.data.title}
{props.data.menuEntries&&(
)}

)
您的登录测试和JSX功能做了不同的事情。我非常肯定JSX元素必须关闭。因此不可能只呈现一个打开/关闭标签。考虑改变透视图。JSX中的每个“HTML”标签实际上是一个函数（Real.CurtEngEnter）。很简单……把树作为道具传递给某个节点组件…节点呈现子节点通过子树（或结束节点）[作为道具] @ XADM（简单到一些，对别人来说很难。考虑写一个答案）是的，谢谢。我找到了一些关于recursive React组件的参考资料，并提出了一些类似的想法；我唯一不喜欢的是，通过这种方式，树结构在渲染代码中是显式的，而在基于函数的代码中不是显式的，或者更好的是，它是在一个地方分解的。@watery通常有很多选项和条件…您可以探索其他可能性，例如…使用简单，但可读性较差