id | title | permalink | redirect_from | |
---|---|---|---|---|
web-components |
ู
ูููุงุช ุงูููุจ |
docs/web-components.html |
|
ุฅูู ู ููููุงุช React ูู ููููุงุช ุงูููุจ ู ุจููุฉ ูุญู ู ุดุงูู ู ุฎุชููุฉ. ุญูุซ ุชูุฒูููุฏูุง ู ููููุงุช ุงูููุจ ุจุชุบููู ููู ูู ููููุงุช ูุงุจูุฉ ูุฅุนุงุฏุฉ ุงูุงุณุชุฎุฏุงู ุ ุจููู ุง ุชูุฒูููุฏูุง ู ููููุงุช React ุจู ูุชุจุฉ ุชุตุฑูุญุงุช ุชูุจูู DOM ุนูู ุชุฒุงู ู ู ุน ุจูุงูุงุชูุง. ูููู ูุฐุง ุงููุฏูุงู ู ุชูุงู ูููุ ููู ูุทููุฑ ูู ุญุฑูุฉ ุงุณุชุฎุฏุงู React ูู ู ููููุงุช ุงูููุจ ูุฏููุ ุฃู ุงุณุชุฎุฏุงู ู ููููุงุช ุงูููุจ ูู React ุฃู ููููู ุง ู ุนูุง.
ู ุนุธู ู ู ูุณุชุฎุฏู React ูุง ูุณุชุฎุฏู ู ููููุงุช ุงูููุจุ ูููู ูุฏ ุชุฑุบุจ ูู ุฐูู ุฎุงุตุฉ ุฅุฐุง ููุช ุชุณุชุฎุฏู ู ููููุงุช ููุงุฌูุฉ ุงูู ุณุชุฎุฏู ู ู ุทุฑู ุซุงูุซ ูุงูุชู ุชููู ู ูุชูุจุฉ ุจุงุณุชุฎุฏุงู ู ููููุงุช ุงูููุจ.
class HelloMessage extends React.Component {
render() {
return <div>ุฃูููุง <x-search>{this.props.name}</x-search>!</div>;
}
}
ู ูุงุญุธุฉ:
ุชุนุฑุถ ู ููููุงุช ุงูููุจ ุนุงุฏุฉ ูุงุฌูุฉ ุจุฑู ุฌุฉ ุชุทุจููุงุช (API) ุฅูุฒุงู ููุฉ. ุนูู ุณุจูู ุงูู ุซุงู ูุฏ ููุนุฑููุถ ู ูููู ุงูููุจ
video
ุงูุฏุงูุชููplay()
โ ูpause()
ุ ููููุตูู ุฅูู ูุงุฌูุฉ ุจุฑู ุฌุฉ ุงูุชุทุจููุงุช ุงูุฅูุฒุงู ูุฉ ูู ููููุงุช ุงูููุจ ุณุชุญุชุงุฌ ุฅูู ุงุณุชุฎุฏุงู ู ุฑุฌุน ููุชูุงุนู ู ุน ุนูุฏุฉ DOM ู ุจุงุดุฑุฉู. ุฅู ููุช ุชุณุชุฎุฏู ู ููููุงุช ููุจ ู ู ุทุฑู ุซุงูุซ ูุงูุญู ุงูุฃู ุซู ูู ูุชุงุจุฉ ู ูููู React ูุณูู ุณููู ุบูุงู ูู ููููุงุช ุงูููุจ ูุฏูู.ุงูุฃุญุฏุงุซ ุงูุตุงุฏุฑุฉ ู ู ูุจู ู ูููู ุงูููุจ ูุฏ ูุง ุชูุชุดุฑ ุจุดูู ุตุญูุญ ุนุจุฑ ุดุฌุฑุฉ ุชุตููุฑ React. ุณุชุญุชุงุฌ ุฅูู ุฅุฑูุงู ู ุนุงูุฌ ุฃุญุฏุงุซ ูุฏููููุง ููุชุนุงู ู ู ุน ูุฐู ุงูุฃุญุฏุงุซ ุถู ู ู ููููุงุช React ูุฏูู.
ุฅุญุฏู ุงูุฃู ูุฑ ุงูุชู ู ู ุงูุดุงุฆุน ุงูุฎุทุฃ ุจูุง ูู ุงุณุชุฎุฏุงู ู ููููุงุช ุงูููุจ ููุฎุงุตููุฉ "class" ุจุฏููุง ู ู "className":
function BrickFlipbox() {
return (
<brick-flipbox class="demo">
<div>ุงููุงุฌูุฉ ุงูุฃู
ุงู
ูุฉ</div>
<div>ุงููุงุฌูุฉ ุงูุฎูููุฉ</div>
</brick-flipbox>
);
}
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. ุงูุธุฑ ุฅูู ูุฐู ุงูู ุดููุฉ ู ู ููุง. ูุฌุจ ุนููู ุชุถู ูู custom-elements-es5-adapter ูุจู ุชุญู ูู ู ููููุงุช ุงูููุจ ูุฅุตูุงุญ ูุฐู ุงูู ุดููุฉ.