<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>react prototype</title>
<style>
a {
display: block;
width: 50px;
height: 20px;
border: 1px solid #ccc;
border-radius: 4px;
text-align: center;
line-height: 20px;
font-size:12xp;
cursor: pointer;
user-select:none;
}
a:hover {
background-color: #eaeaea;
}
</style>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
</head>
<body>
<div id="like_button_container"></div>
<script>
// 创建element
const span = React.createElement('span', {}, 'Like');
const element = React.createElement('a', { onClick: () => console.log('trigger click') }, span);
// 获取dom元素
const domContainer = document.querySelector('#like_button_container');
// 渲染
ReactDOM.render(element, domContainer);
</script>
</body>
</html>
网友评论