function ReactRender({ comp = <div></div>, el = "#app" }) {
ReactDOM.render(
comp,
document.querySelector(el)
)
}
这里设置默认参数的时候,这里面的对象里赋值不能使用prop:value
的形式,而必须是prop=value
的形式。
然而传入的值的对象可以是prop:value
的形式。、
还有就是上面的写成参数的形式的,可以直接取得对象中的属性。通过属性获得值。
handleClick() {
alert("点击我(惦记我)干嘛");
}
render() {
return (
<div>
<button onClick={this.handleClick()} value="点击我">点击我</button>
</div>
)
}
这里给onClick传进去的是 handleClick() 的形式,结果一开始就运行了。直接传入方法名就不会。
然后这里给handleClick()里的形参给了一个e.如下图:
handleClick(e) {
console.log(e.target)
}
这里效果如上。正常读取出复合对象event
改为其他值
handleClick(value) {
console.log(value.target)
}
结果也是一样。
但是想给方法给定别的值。然后通过onClick传递进去,代码如下:
handleClick(value) {
console.log(value);
}
render() {
const val=1;
return (
<div>
<button onClick={this.handleClick(val)} value="点击我">点击我</button>
</div>
)
}
这里无法做到,直接就运行了。所以是无法通过给定方法后加参数的方法运行。
但是这里利用bind 函数就可以做到.
<button onClick={this.handleClick.bind(this,val)} value="点击我">点击我</button>
显示结果