将react元素构建为字符串

Question

我正在尝试动态构建一个React元素。

    let section = <span>Home> {header.section}</span>
    ...
    section += <span> > {location.title}</span>

    return (section)

如果我不尝试添加任何东西它工作正常，当我做上述我得到[object Object][object Object]

如何动态构建React元素？

Answer 1

你可以试试这个

let section = [<span key={1}>Home> {header.section}</span>]
....
section.push(<span key={2}> {location.title}</span>)

return section

在渲染中

<div>{section}</div>

Answer 2

你可以用空数组声明section并继续推送你想要的元素然后用map来渲染它:)

   ######### Process data here #########
   let section = [];
   section.push(<span>Home > Company Name</span>);
   section.push(<span>About us > Company Features</span>);

    ######### To render using map  #########
   const renderSection = section.map((val, idx) =>{
        return (val);
    })


    ######### To Display  #########
  {renderSection}

希望这可以帮助 ：）