React 19 Web自定义组件示例最近，有很多关于React19的新闻。已经开始支持Web组件，或者叫做“自定义元

最近，有很多关于React19的新闻。已经开始支持Web组件，或者叫做“自定义元素”。它们的HTML表达式为<dashed-elements>，这是问题所在。显然，在JSX中，React很难知道props应该被视为a property or an attribute。所以他们决定这样做：

服务器端渲染 传递给自定义元素的props将渲染为属性【attributes】，如果它们的类型是原始值，如string，number，或者值为true。非原始类型,如object、symbol、function或value为false prop将被省略。
客户端渲染：与自定义元素实例上的属性【property】将被分配为property，否则它们将被分配为attributes。

在这里我创建了一个LitElement并在React组件中渲染它：

我在想..如果<designsystem-button>需要一个单击处理程序怎么办？

<MyCard> 
    <p>blah blah</p> 
    <!-- this is fine --> 
    <designsystem-button onClick={() => {}}></designsystem-button> 
</MyCard>

显然，这不是问题。

问题是，如果我想从React发送一个函数供Web组件调用。你可能会认为我们可以按照LitElement的方式发送函数：

<!-- nope -->
<designsystem-button .mySpecialEvent=${specialEvent}>

但是不，JSX不喜欢那种“点语法”，也不会编译。

所以你要像这样发送：

<designsystem-button onSpecialEvent={() => mySpecialEvent()}

然后，为了“调用”该事件，“dispatch”正确注册事件。

this.dispatchEvent(new CustomEvent("SpecialEvent", { bubbles: true }));

传入一个复杂对象：