javascript - switch case JS的相同属性

Question

我正在使用 React，我不想回复 <ListItem ...> 代码的次数与实际情况一样多。有没有一种方法可以简化和减少这段代码？

   displayToDoList = () => {
        switch (this.state.sorted) {
            case 0:
                return (this.state.todosById.map(todo =>
                    <ListItem
                        key={todo.id}
                        plainText={todo.plainText}
                        name={todo.name}/>))
                break;

            case 1:
                return (this.state.todosByName.map(todo =>
                    <ListItem
                        key={todo.id}                       
                        plainText={todo.plainText}
                        name={todo.name}/>))
                break;
            case 2:
                return (this.state.todosByCreatedAt.map(todo =>
                    <ListItem
                        key={todo.id}
                        plainText={todo.plainText}
                        name={todo.name}/>))
                break;
            case 3:
                return (this.state.todosByCharcacters.map(todo =>
                    <ListItem
                        key={todo.id}
                        plainText={todo.plainText}
                        name={todo.name}/>))
                break;

        }
    }

我认为会有比我更好的方法。

标签： javascriptreactjs

Answer 1

而不是case0, 1, 2.. make this.state.sorted= 'todosById','todosByName',..

然后返回

displayToDoList = () => {
return (this.state[this.state.sorted].map(todo =>
                    <ListItem
                        key={todo.id}                       
                        plainText={todo.plainText}
                        name={todo.name}/>))
}