演示react封装的代码
Posted Y~forward
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了演示react封装的代码相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div class=‘wrapper‘>
</div>
</body>
<script type="text/javascript">
// class LikeButton {
// render () {
// return `
// <button id=‘like-btn‘>
// <span class=‘like-text‘>赞</span>
// <span>??</span>
// </button>
// `
// }
// }
// function fn(){
// alert(1)
// }
// const wrapper = document.querySelector(‘.wrapper‘)
//
// const likebtn = wrapper.querySelector(‘.like-btn‘)
// const likeButton1 = new LikeButton()
// wrapper.innerHTML = likeButton1.render()
//
// const likeButton2 = new LikeButton()
// wrapper.innerHTML += likeButton2.render()
//
// likebtn.onclick=fn
const createDOMFromString = (domString) => {
const div = document.createElement(‘div‘)
div.innerHTML = domString
return div
}
// class LikeButton {
// constructor () {
// this.state = { isLiked: false }
// }
// setState (state) {
// const oldEl = this.el
// this.state = state
// this.el = this.render()
// if (this.onStateChange) this.onStateChange(oldEl, this.el)
//
// }
//
// changeLikeText () {
//// console.log(this)
//// const likeText = this.el.querySelector(‘.like-text‘)
//// this.state.isLiked = !this.state.isLiked
//// likeText.innerHTML = this.state.isLiked ? ‘取消‘ : ‘点赞‘
// this.setState({
// isLiked: !this.state.isLiked
// })
// }
// render () {
// this.el = createDOMFromString(`
// <button class=‘like-button‘>
// <span class=‘like-text‘>${this.state.isLiked ? ‘取消‘ : ‘点赞‘}</span>
// <span>??</span>
// </button>
// `)
// this.el.addEventListener(‘click‘, this.changeLikeText.bind(this), false)
// return this.el
// }
// }
class Component {
constructor (props = {}) {
this.props = props
console.log(this)
}
setState (state) {
const oldEl = this.el
this.state = state
this.el = this._renderDOM()
if (this.onStateChange) this.onStateChange(oldEl, this.el)
console.log(this)
}
_renderDOM () {
this.el = createDOMFromString(this.render())
if (this.onClick) {
this.el.addEventListener(‘click‘, this.onClick.bind(this), false)
}
return this.el
}
}
// class LikeButton extends Component {
// constructor (props) {
// super(props)
// this.state = { isLiked: false }
// }
//
// onClick () {
// this.setState({
// isLiked: !this.state.isLiked
// })
// }
//
// render () {
// return `
// <button class=‘like-btn‘ style=‘background-color: ${this.props.bgColor}‘>
// <span class=‘like-text‘>${this.state.isLiked ? ‘取消‘ : ‘点赞‘}</span>
// <span>??</span>
// </button>
// `
// }
// }
class RedBlueButton extends Component {
constructor (props) {
super(props)
this.state = {
color: ‘red‘
}
}
onClick () {
this.setState({
color: ‘blue‘
})
}
render () {
return `
<div style=‘color: ${this.state.color};‘>${this.state.color}</div>
`
}
}
const wrapper = document.querySelector(‘.wrapper‘)
const mount = (component, wrapper) => {
wrapper.appendChild(component._renderDOM())
component.onStateChange = (oldEl, newEl) => {
wrapper.insertBefore(newEl, oldEl)
wrapper.removeChild(oldEl)
}
}
mount(new RedBlueButton({ bgColor: ‘red‘ }), wrapper)
</script>
</html>
以上是关于演示react封装的代码的主要内容，如果未能解决你的问题，请参考以下文章
React Native快速开发 厕所在哪App LBS定位 框架封装
支持源码多重加密，将网站一键生成EXE文件运行，封装网站源码演示运行