如何动态构建React元素？拼接元素出现[object Object]问题

嘿，我懂你遇到的困扰了——当你用+=拼接React元素时，结果变成了[object Object][object Object]，这可不是React的正确用法哦。

原因其实很简单：我们写的JSX元素，编译后本质是React.createElement()返回的JavaScript对象。当你用+=去拼接两个对象时，JavaScript会自动调用对象的toString()方法，而默认的对象toString结果就是[object Object]，所以才会出现这个奇怪的输出。

下面给你几种正确的动态构建React元素的方法：

方法一：用数组存储动态元素（最适合多步骤动态添加） #

React支持直接渲染元素数组，只需要给每个元素加上唯一的key属性就行：

// 初始化数组，放入第一个元素
let section = [<span key="home-part">Home> {header.section}</span>];

// 动态添加新的元素
section.push(<span key="location-part"> > {location.title}</span>);

// 直接返回这个数组
return section;

方法二：用Fragment包裹+条件/动态渲染 #

如果你的元素是根据条件动态生成的，也可以直接在JSX里处理，用<>（React Fragment）包裹不会生成额外的DOM节点：

return (
  <>
    <span>Home> {header.section}</span>
    {/* 这里可以根据需求动态添加元素，比如判断location是否存在 */}
    {location && <span> > {location.title}</span>}
  </>
);

方法三：用循环生成动态元素（如果有多个列表项） #

如果是从数组数据生成多个元素，用map方法最方便：

const breadcrumbs = [
  { label: 'Home', value: header.section },
  { label: location.title, value: location.title }
];

return (
  <>
    {breadcrumbs.map((item, index) => (
      <span key={index}>
        {/* 处理分隔符，第一个元素前面不加> */}
        {index > 0 && ' > '}
        {item.label}> {item.value}
      </span>
    ))}
  </>
);

总之，记住别把React元素当成字符串来拼接，要把它们当成JavaScript对象来管理——用数组存储、条件渲染或者循环生成，才是React设计的正确使用方式~

内容的提问来源于stack exchange，提问作者beek