查看eslint规则,No .bind() or Arrow Functions in JSX Props。
它表示不使用,箭头功能或绑定:
<div onClick={this._handleClick.bind(this)}></div>
<div onClick={() => console.log('Hello!'))}></div>
而是使用:
<div onClick={this._handleClick}></div>
这一切都很好但是如何在click事件中将参数传递给此函数?
这是我的天真代码示例:
export class UserList extends Component {
constructor(props) {
super(props);
this.handleToggleActive = this.handleToggleActive.bind(this);
}
handleToggleActive() {
console.log(arguments);
}
render() {
return (
<ul className="user-list">
{this
.props
.users
.map(user => (
<li key={user.id}>
<Link to={`/users/${user.id}`}>{user.name}</Link>
<Button onClick={this.handleToggleActive}>Toggle Active</Button>
</li>
))}
</ul>
);
}
}
如何获取user.id
到我的handleToggleActive
功能?当我尝试类似的东西时:
<Button onClick={this.handleToggleActive(user.id)}>Toggle Active</Button>
渲染时执行,我能看到的另一种方法是使用箭头功能吗?
这样做的正确方法是什么?
答案 0 :(得分:2)
使用bind和arrow函数,会创建一个新函数,将一个全新的prop传递给你的组件,导致不必要的重新渲染和垃圾收集器的额外工作,使用数据属性是一个糟糕的设计,而不是React方式做事,你不应该直接访问DOM,而是让React处理事情。而不是你可以只创建一个新组件并将处理程序作为prop传递,处理&#34;绑定&#34;组件方法中的id:
class User extends Component {
handleClick() {
this.props.handleToggleActive(this.props.user.id);
}
render() {
return (
<li>
<Link to={`/users/${this.props.user.id}`}>{this.props.user.name}</Link>
<Button onClick={this.handleClick}>Toggle Active</Button>
</li>
)
}
}
export class UserList extends Component {
constructor(props) {
super(props);
this.handleToggleActive = this.handleToggleActive.bind(this);
}
handleToggleActive(userId) {
console.log(userId);
}
render() {
return (
<ul className="user-list">
{this
.props
.users
.map(user => (
<User key={user.id} user={user} handleToggleActive={this.handleToggleActive} />
))}
</ul>
);
}
}
答案 1 :(得分:0)
我猜您可以使用data-*
属性。
export class UserList extends Component {
constructor(props) {
super(props);
this.handleToggleActive = this.handleToggleActive.bind(this);
}
handleToggleActive(event) {
console.log(event.target.dataset.id);
}
render() {
return (
<ul className="user-list">
{this
.props
.users
.map(user => (
<li key={user.id}>
<Link to={`/users/${user.id}`}>{user.name}</Link>
<Button onClick={this.handleToggleActive} data-id={user.id}>Toggle Active</Button>
</li>
))}
</ul>
);
}
}
答案 2 :(得分:0)
为了解决性能问题(这就是规则存在的原因),使用memoization怎么样?
例如,使用包lru-memoize
,你会得到(带有哑元素),例如:
var memoize100 = require('lru-memoize')(100);
let handleToggleActive = (user) => () => {
console.log(user.id)
}
handleToggleActive = memoize100(handleToggleActive)
const UserList = (props) =>
<ul className="user-list">
{ props.users
.map(user => (
<li key={user.id}>
<Link to={`/users/${user.id}`}>{user.name}</Link>
<Button onClick={handleToggleActive(user)}>Toggle Active</Button>
</li>
))
}
</ul>
答案 3 :(得分:0)
使用箭头函数或bind将在每次呈现组件时创建不同的回调实例。因此,每次都重新创建该函数,并且旧的垃圾收集,垃圾收集器过载。此外,由于这一点,纯组件和在shouldcomponentupdate中具有浅比较的组件将始终重新渲染,因为它将在其道具中找到更改,因为旧函数被丢弃并且每次呈现父组件时都会创建新函数。
我们可以使用属性初始化程序语法进行currying,以避免在JSX代码中使用bind或arrow函数。
handleClick = (param) => (e) => {
console.log('Event', e);
console.log('Parameter', param);
}
render() {
<button onClick={this.handleClick('Parameter')}></button>
}