演示react封装的代码

最新推荐文章于 2024-07-04 00:59:27 发布

weixin_30609287

最新推荐文章于 2024-07-04 00:59:27 发布

阅读量85

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yforward/p/7270312.html

版权

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

</body>

// 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.οnclick=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>

转载于:https://www.cnblogs.com/yforward/p/7270312.html

weixin_30609287

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
演示react封装的代码

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div class='wrapper'> </div&gt...
复制链接

扫一扫

演示react封装的代码

“相关推荐”对你有帮助么？