?
This document uses PHP Chinese website manual Release
React和Web組件的構(gòu)建是為了解決不同的問(wèn)題。Web組件為可重用組件提供了強(qiáng)大的封裝，而React提供了一個(gè)聲明庫(kù)來(lái)保持DOM與數(shù)據(jù)同步。這兩個(gè)目標(biāo)是相輔相成的。作為開(kāi)發(fā)人員，您可以在Web組件中自由使用React，或者在React中使用Web組件，或者同時(shí)使用這兩種組件。
大多數(shù)使用React的人不使用Web組件，但可能需要使用Web組件，尤其是在使用使用Web組件編寫(xiě)的第三方UI組件時(shí)。
在React中使用Web組件
class HelloMessage extends React.Component {
render() { return <div>Hello <x-search>{this.props.name}</x-search>!</div>; }
}注意：Web組件經(jīng)常公開(kāi)一個(gè)命令式API。例如，一個(gè)
videoWeb組件可能會(huì)公開(kāi)play()并pause()起作用。要訪問(wèn)Web組件的命令式API，您需要使用ref直接與DOM節(jié)點(diǎn)交互。如果您使用的是第三方Web組件，最好的解決方案是編寫(xiě)一個(gè)React組件，該組件可用作Web組件的包裝。Web組件發(fā)出的事件可能無(wú)法通過(guò)React渲染樹(shù)正確傳播。您將需要手動(dòng)附加事件處理程序來(lái)處理React組件中的這些事件。
一個(gè)普遍的混淆是Web組件使用“class”而不是“className”。
function BrickFlipbox() {
return (
<brick-flipbox class="demo">
<div>front</div>
<div>back</div>
</brick-flipbox> );
}在您的Web組件中使用React
class XSearch extends HTMLElement {
connectedCallback() {
const mountPoint = document.createElement('span');
this.attachShadow({ mode: 'open' }).appendChild(mountPoint);
const name = this.getAttribute('name');
const url = 'https://www.google.com/search?q=' + encodeURIComponent(name);
ReactDOM.render(<a href={url}>{name}</a>, mountPoint);
}
}
customElements.define('x-search', XSearch);注意：如果您使用Babel轉(zhuǎn)換類，此代碼將不起作用。請(qǐng)參閱此問(wèn)題以進(jìn)行討論。