React
和WEB
组件
React
和WEB
组件涉及不同领域,分别解决不同的问题,WEB
组件提供组件的可复用性,而React
确保数据的一致性,你可以在WEB
组件中使用React
,也可以在React
中使用WEB
组件。
很多人在使用React
时都不会使用WEB
组件,但是可能你想使用第三方UI
组件,极可能进行混用了。
1.在React
中使用WEB
组件
class HelloMessage extends React.Component {
render() {
return <div>Hello <x-search>{this.props.name}</x-search>!</div>;
}
}
x-search
就外部实现的WEB
组件
说明
WEB
组件一般会提供一个命令式的API
,比如一个videoWEB
组件,就可能提供play
和pause
函数,如果你想使用这些命令式API
的话,就需要在渲染DOM
时使用ref
(如果不了解ref
的,可以看我的博客),这个可以将WEB
组件的实例传递给React
中,从而进行响应的操作。如果你是直接使用第三方已经写好的WEB
组件的话,最好的方法就是在React
中写一个React
组件包裹住这个WEB
组件。
可能WEB
组件事件的触发无法通过React
的组件传递下来,所以你需要自己将这些函数响应绑定到React
组件上。
需要注意的是
WEB
组件中使用的类名是class
,而不是className
function BrickFlipBox() {
return (
<brick-flipBox class="demo">//注意不是className
<div>front</div>
<div>back</div>
</brick-flipBox>
);
}
2.在WEB
组件中使用React
const proto = Object.create(HTMLElement.prototype,{
attachedCallback: {
value: function() {
const mountPoint = document.createElement('span');
this.createShadowRoot().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); } } }); document.registerElement('x-search',{prototype: proto}); //此函数是注册一个HTML标签
下一篇将讲
React
的高级组件