如何在reactjs中使用條件呈現？

Question

我有以下反應組件，它會創建一個任務列表。

代碼工作正常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; 

Answer 1

這應該工作：

const listItems = data.length == 0 ? "List empty" : data.map(todo => { ... });

Answer 2

您可以使用類似如下，希望這有助於。

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;