javascript - 如何在reactjs中使用条件渲染？

Question

我有以下 react 组件，它创建任务列表。

代码运行正常this.props.data当数据为空时，不会出现任何任务。

我想以某种方式更改代码，以便如果数组为空，则显示单个文本

"list empty"

改为显示。

我尝试为 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;

Answer 1

这应该有效:

const listItems = data.length == 0 ？ “列表为空”:data.map(todo => { ... });