如何在 React 中呈现调用非组件函数的 jsx？

Question

我在 jsx 之前添加了 return 但它停止了迭代

function App(){

  function recursion(object){
    for(let key in object){
      if(typeof object[key] === 'object'){
        <div>{key}</div>  // this jsx needs to render
        recursion(object[key])
      } else {
        <div>{key}</div>  // and this one
      }
    }
  }

  return {
    <>
      {recursion(someObject)}
    </>
  }
}

Answer 1

你需要return JSX；它不能只是躺在函数中。这样的事情应该可以解决问题：

function App(){

  function recursion(object){
    const ret = [];

    for(let key in object){
      if(typeof object[key] === 'object'){
        ret.push (
          <>
            <div>{key}</div>
            {recursion(object[key])}
          </>
        );
      } else {
        ret.push(<div>{key}</div>);
      }
    }

    return ret;
  }

  return (
    <>
      {recursion(someObject)}
    </>
  );
}

如何在 React 中呈现调用非组件函数的 jsx？

How to render jsx calling non component function in React?

javascript

recursion

rendering

jsx

reactjs