Javascript 将函数转换为jsx

我有两个函数，一个用于解析html字符串，将其标题放入数组

const str=“test-1test1-1test1-1-1test1-2test1-2-1test1-2-2test-2test-3test-4
"
const wrapper=document.createElement（'div'）；
wrapper.innerHTML=str.trim（）；
设tree=[]；
设leaf=null；
for（wrapper.querySelectorAll（“h1，h2，h3，h4，h5，h6”）的常量节点）
{
const nodeLevel=parseInt（节点标记名[1]）；
const newLeaf={level:nodeLevel，text:node.textContent，子项：[]，父项：leaf}；
while（leaf&&newLeaf.level您始终可以使用

e、 g

但是，最佳实践可能是这样的


//可重用树组件
导出默认类树扩展组件{
静态类型={
子项：需要PropTypes.array.isRequired
}
render（）{
const{children}=this.props
返回(
{children.map（叶=>

{leaf.text}
{leaf.children&&}

)}
)
}
}
//（重新）使用它
函数render（）{
返回(
);
}
您可以随时使用

e、 g

但是，最佳实践可能是这样的


//可重用树组件
导出默认类树扩展组件{
静态类型={
子项：需要PropTypes.array.isRequired
}
render（）{
const{children}=this.props
返回(
{children.map（叶=>

{leaf.text}
{leaf.children&&}

)}
)
}
}
//（重新）使用它
函数render（）{
返回(
);
}
目前，您有一个递归函数（
makeOl
），我将其替换为
renderLeaf
函数：

呈现这种情况的一种方法是：

class Tree extends React.Component {
  render() {
    let leafs = this.props.children
    return (
      <React.Fragment>
        {leafs.map(this.renderLeaf)}
      </React.Fragment>
    )
  }
  renderLeaf(leaf) {
    return (
      <ol>
        <li>
          {leaf.text}
          {leaf.children && leaf.children.map(this.renderLeaf)}
        </li>
      </ol>
    )
  }
}

类树扩展了React.Component{
render（）{
让leafs=this.props.children
返回(
{leafs.map（this.renderLeaf）}
)
}
renderLeaf（叶）{
返回(

{leaf.text}
{leaf.children&&leaf.children.map（this.renderLeaf）}

)
}
}

然后您可以将其用作：
当前，您有一个递归函数（
makeOl
），我将其替换为
renderLeaf
函数：

呈现这种情况的一种方法是：

class Tree extends React.Component {
  render() {
    let leafs = this.props.children
    return (
      <React.Fragment>
        {leafs.map(this.renderLeaf)}
      </React.Fragment>
    )
  }
  renderLeaf(leaf) {
    return (
      <ol>
        <li>
          {leaf.text}
          {leaf.children && leaf.children.map(this.renderLeaf)}
        </li>
      </ol>
    )
  }
}

类树扩展了React.Component{
render（）{
让leafs=this.props.children
返回(
{leafs.map（this.renderLeaf）}
)
}
renderLeaf（叶）{
返回(

{leaf.text}
{leaf.children&&leaf.children.map（this.renderLeaf）}

)
}
}

然后您可以将其用作：
我不确定您在这里要问什么。JSX只是一个语法规范。您只是想将解析后的HTML树重建为React元素节点树吗？@LINKIWI，确切地说，我不确定您在这里要问什么。JSX只是一个语法规范。您只是想重建解析后的HTML树吗作为React元素节点树？@LINKIWI，确切地说，虽然我很确定OP正试图实现这一点，但要直接回答如何转换为JSX语法的问题，您可以执行
const Elem='li'；return…
我现在正在写这篇文章。：）你是否在每个列表元素中都有一个unqiue“id”？似乎在每个h3well之后都会创建一个空的ol标记，这就是一些实现问题。我可以非常自信地向你保证，我的答案总体上是有效的。我建议，你用你得到的更新你的代码/问题。或者，用你拥有的代码创建一个新问题我很确定这就是OP想要完成的，为了直接回答如何转换成JSX语法的问题，你可以做
constelem='li'；return…
I'm此刻正在写这篇文章。：）你在每个列表元素中都有一个unqiue'id'？似乎在每个元素后面都创建了空的ol标记H3好吧，那就是一些实现问题。我可以非常自信地向你保证，我的答案总体上是有效的。我建议你用你得到的更新你的代码/问题。或者，用你得到的代码和问题/错误创建一个新问题。