React向Lit Element子组件传递对象属性值为undefined问题求助

问题原因 #

这个问题是React与Web Component（Lit Element基于Web Component标准实现）的属性传递机制不兼容导致的：

• React处理非内置HTML的自定义标签时，默认会将所有传递的props序列化为字符串作为HTML Attribute设置，不会直接绑定到元素的JavaScript Property上。
• 你在Lit中定义的item是Object类型的Property，只能通过JS对象赋值的方式接收，通过HTML Attribute传递自然无法拿到正确的对象值，最终表现为undefined。
  仅传单个属性可以正常接收的原因是，基础类型的字符串、数字等序列化后不会丢失值，Lit可以自动解析。

解决方法 #

方法1：使用ref手动绑定Property（兼容所有React版本） #

在React父组件中通过回调ref手动给DOM元素的itemProperty赋值，修改父组件渲染逻辑即可：

return (
  <div>
    {pokemons.map((item, i) => (
      <poke-card 
        key={item.id}
        ref={el => {
          if (el) el.item = item
        }}
      ></poke-card>
    ))}
  </div>
);

这种方案不需要修改Lit侧代码，改造成本最低。

方法2：升级到React 19+ #

React 19已经原生支持自定义元素的Property自动绑定，无需额外修改代码，直接按照你原来的写法传递属性即可正常生效。

额外优化建议 #

可以在Lit组件的渲染逻辑中加上可选链判断，避免首次渲染还未拿到属性时抛出错误：

render() {
  const { item } = this;
  return html`
    <div>
      <p>${item?.name}</p>
    </div>
  `;
}

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