我有以下反应组件,它会创建一个任务列表。如何在reactjs中使用条件呈现?
代码工作正常this.props.data
当数据为空时,不显示任务。
我想,这样如果数组为空单的文字
“列表为空”显示
而是改变一种方式的代码。
我试图创建一个函数listItems
和内部添加一些逻辑,但我不能从JXS,例如<div>{listItems()}</div>
调用它,但我甚至不确定这是否是正确的方法。
任何想法?
import React, { Component } from 'react';
import Task from './Task.js'
class TasksList extends Component {
constructor(props) {
super(props);
}
render() {
const data = this.props.data;
const listItems = data.map(todo => {
return <Task
id={todo.id}
key={todo.id.toString()}
title={todo.title}
onTitleChange={this.props.onTitleChange}
onTaskDelete={this.props.onTaskDelete}
/>
});
return (
<div>{listItems}</div>
)
}
}
export default TasksList;