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

我有下面的react组件，它创建了一个任务列表

代码工作正常

this.props.data

并且当数据为空时，不会显示任何任务

我希望以某种方式更改代码，以便在数组为空时，只显示一个文本

“列表为空”

而是显示

我试图为

listItems

创建一个函数，并在其中添加一些逻辑，但我无法从JXS调用它，例如

{listItems（）}

，尽管我甚至不确定这是否是正确的方法

有什么想法吗

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;

import React，{Component}来自'React'；
从“./Task.js”导入任务
类TasksList扩展了组件{
建造师（道具）{
超级（道具）；
}
render（）{
const data=this.props.data；
const listItems=data.map（todo=>{
返回
});
返回(
{listItems}
)
}
}
导出默认任务列表；

这应该可以：

---

const listItems=data.length==0？“列表为空”：data.map（todo=>{…}）
您可以使用下面的内容，希望这对您有所帮助

class TasksList extends Component {
   constructor(props) {
       super(props);
   }
   render() {

       if(this.props.data.length > 0) {
         return (<div>
           {data.map(todo => {
           return <Task
               id={todo.id}
               key={todo.id.toString()}
               title={todo.title}
               onTitleChange={this.props.onTitleChange}
               onTaskDelete={this.props.onTaskDelete}
           />
         });}
       </div>);
       }
       return (
           <div>list empty</div>
       )
   }
}

export default TasksList;

类任务列表扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
如果（this.props.data.length>0）{
返回(
{data.map（todo=>{
返回
});}
);
}
返回(
列表为空
)
}
}
导出默认任务列表；