gpt4 book ai didi

javascript - 在 jsx 中呈现列表时的多次返回

转载 作者:行者123 更新时间:2023-11-30 15:10:55 25 4
gpt4 key购买 nike

有什么方法可以重构下面的代码以使其更干净吗?特别是 renderTodos 方法中的多次返回。我也有一个困惑,我是否正确创建了 renderTodos 方法?我应该把它放在渲染函数中吗?或者做 this.renderTodos() 可以吗?

export default class TodoList extends Component {

renderTodos = () => {
const { todos } = this.props

return todos.map(todo => {
return (
<Todo key={todo.id} {...todo} />
)
})
}

render() {
return(
<div>
{this.renderTodos()}
</div>
)
}
}

最佳答案

由于您只想返回元素而不需要任何条件或计算,因此您可以避免 {}return with map。

像这样:

renderTodos = () => {
const { todos } = this.props;

return todos.map(todo => <Todo key={todo.id} {...todo} /> )
}

通过这种方式,需要在 renderTodos 中返回以从该方法返回结果。

另一种方法是将 map 部分直接放在 render 方法中,如下所示:

render() {
return(
<div>
{
this.props.todos.map(todo => <Todo key={todo.id} {...todo} /> )
}
</div>
)
}

或者最好写成Stateless Functional Component :

const TodoList = (props) => (
<div>
{
props.todos.map(todo => <Todo key={todo.id} {...todo} /> )
}
</div>
)

查看这篇文章:Presentational and Container Components

关于javascript - 在 jsx 中呈现列表时的多次返回,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45125299/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com