javascript - react这个bind是不是多余的 ?
本文介绍了javascript - react这个bind是不是多余的 ?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
constructor(props) {
super(props);
this.render = this.render.bind(this);
this.state = {
items: this.props.items,
disabled: true
};
}
解决方案
答
你这个 bind 是多余的,因为 render 方法是React加载时自己调的, this 本来就是 component 实例
需要的情况
当使用 es6 的 class 的写法来写 component 时,事件绑定中的this会指定当前标签的props, 这时需要使用 这种 bind 绑定到 component,以便在回调中使用 this 的方法比如setState
,参考 Autobinding
class SayHello extends React.Component {
constructor(props) {
super(props);
// This line is important!
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
alert('Hello!');
}
render() {
// Because `this.handleClick` is bound, we can use it as an event handler.
return (
<button onClick={this.handleClick}>
Say hello
</button>
);
}
}
怎么不用 bind
如果你用 babel 的话可以添加安装这个 transform-class-properties,(或者react提供的create-react-app,默认已经包含了)
npm install --save-dev babel-plugin-transform-class-properties
# 还有在 babelrc 或者配置中添加
"plugins": ["transform-class-properties"]
写法就变成
class SayHello extends React.Component {
handleClick = () => {
}
}
这篇关于javascript - react这个bind是不是多余的 ?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文