React中如何根据条件选择标签并正确传递属性？

你可以通过条件属性传递来解决这个问题，只在href存在时才传递该属性：

const Comp = href ? Link : 'div';
return (
  <Comp
    {...(href && { href: `${href}/${node.text}` })}
  >...</Comp>
);

原理是利用逻辑与运算符，当href为真值时，才展开包含href属性的对象；如果href是undefined，则展开undefined，不会传递任何额外属性。

另外一种更直观的写法是分开渲染两个组件，避免条件属性的写法：

if (href) {
  return (
    <Link href={`${href}/${node.text}`}>...</Link>
  );
}
return <div>...</div>;

这种写法逻辑更清晰，也不会出现多余属性传递的问题，适合组件结构不复杂的场景。

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