2、这个图片地址能够直接不使用引号,但是使用绑定背景图片cover的时候,图片地址就必须加上引号。这是JS动态绑定背景图片cover失效的原因。
状态提升
定义: 两个或者多个组件共同使用共有状态的方式
使用范围: 两个组件提升到最近的父组件来完成状态的变化和保存;
解析: 一个组件有入参和出参
入参:使用
属性,但是子类元素不可以擅自修改其属性
类比于受控组件 <input value={template} onChange={handChane}>
自定义子组件也接收父组件传过来的 template 和方法 onTemplateChange(名字可以自定义)
子组件可以调用this.props.onTemplateChange
父组件 在子组件标签引用 <TemplateChange template={deelTemplate} onTemplateChange = {this.handChange}></TemplateChange>
并且需要在render中 处理返回的参数,并使页面做出重新渲染
render(){
const deelTemplate = deelTools(this.state.template)
}
最好是在元素生成的时候就加上事件,不然的话比较麻烦。
在jquery中,你也可以用live()和delegate()这样的方法绑定元素,是实时监听的。
但是最好还是在元素生成的时候就加上事件:
$('#btn').bind('click', function(event) {/* Act on the event */
$("<li>Hello</li>").appendTo("#list").bind('click', function(event) {
/* Act on the event */
console.log($(this).text())
})
})
在mootools中对应的方法:
// Creating an new anchor with an Objectvar myAnchor = new Element('a', {href: 'http://mootools.net',
'class': 'myClass',
html: 'Click me!',
styles: {
display: 'block',
border: '1px solid black'
},
events: {
click: function(){
alert('clicked')
},
mouseover: function(){
alert('mouseovered')
}
}})