React/JS技术问题：如何通过函数传递HTML元素？

这问题我之前也碰到过！核心原因是你把React元素和字符串混在一起处理了——React组件本质是JavaScript对象，不是字符串，直接拼接肯定出问题。给你两个简单的解决思路：

方案1：让函数接受React节点（推荐） #

把你的list_item函数的第二个参数从字符串改成接受React节点（React.ReactNode类型，支持字符串、组件、Fragment等所有可渲染内容），这样就能直接把字符串和组件组合起来传递：

// 修改函数，参数改为接受React节点
const list_item = (key, content) => <li key={key}>{content}</li>;

// 调用时用Fragment包裹组合内容（无额外DOM节点）
list_item(mykey, <> {mystring} <MdCheckCircle /> </>);

// 也可以用数组（注意给每个元素加唯一key）
list_item(mykey, [mystring, <MdCheckCircle key="check-icon" />]);

这种方式最灵活，后续要添加更多元素（比如文本、按钮、图标组合）都能直接传递，不用改函数逻辑。

方案2：给函数新增参数传递组件 #

如果不想改动原函数的参数逻辑，可以专门加一个参数用来接收额外的React元素，在函数内部一起渲染：

// 新增第三个参数，默认值设为null兼容原有调用
const list_item = (key, str, extraElement = null) => (
  <li key={key}>
    {str} {extraElement}
  </li>
);

// 调用时直接传入MdCheckCircle组件
list_item(mykey, mystring, <MdCheckCircle />);

这样既保留了原函数只传字符串的调用方式，又能满足添加图标的需求。

为啥之前的方法不行？ #

• 用mystring + "<MdCheckCircle/>"时，你把组件转成了字符串字面量，React会直接渲染成文本，不会解析为组件；
• 用mystring + <MdCheckCircle/>时，React组件是一个对象，和字符串拼接会触发对象的toString()方法，最终输出"[Object]"。

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