来自子组件的React PureComponent传递参数
来自子组件的React PureComponent传递参数
提问于 2018-10-08 00:29:31
我有一个呈现Todo组件列表的TodosList组件。
下面是Todo组件：
export class Todo extends React.PureComponent {
render() {
return (
<li onClick={this.props.onClick}>
{this.props.title}
</li>
);
}
}下面是TodoList组件：
export class TodoList extends React.PureComponent {
toggleTodo = id => this.props.toggleTodo(id);
constructor(props) {
super(props);
}
render() {
return (
<ul>
{this.props.todos.map(todo => (
<Todo
key={todo.id}
{...todo}
onClick={this.toggleTodo.bind(null, todo.id)}
/>
))}
</ul>
);
}
}代码的问题是，绑定创建了一个新函数，即使没有任何更改，它也会导致纯组件重新呈现。
我该如何解决这个问题呢？
解决方案可以是这样的：
export class Todo extends React.PureComponent {
render() {
return (
<li onClick={this.props.onClick.bind(null, this.props.id)}>
{this.props.title}
</li>
);
}
}但我想知道这是不是一个好的解决方案。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-10-08 00:38:07
您应该只将函数的引用传递给item组件，并在那里调用它。
export class TodoList extends React.PureComponent {
render() {
return (
<ul>
{this.props.todos.map(todo => (
<Todo
key={todo.id}
{...todo}
handleClick={this.props.toggleTodo}
/>
))}
</ul>
);
}
}为此，您不需要statefull组件。
const todo = ({id, title, handleClick} => (
<li onClick={() => handleClick(id)}>
{title}
</li>
);
export default todo页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52690563
复制相关文章
相似问题