reactjsで条件付きレンダリングを使用するには？

Question

私は、タスクのリストを作成する以下の反応コンポーネントを持っています。

コードは正常に動作し、this.props.dataとなり、データが空の場合はタスクが表示されません。

私は配列が「空のリスト」とは、単一のテキスト

に空である場合

が代わりに表示されるような方法でコードを変更したいと思い

。

私はlistItemsの関数を作成しようとしましたが、ロジックを追加しましたが、正しいアプローチであるかどうかはわかりませんが、<div>{listItems()}</div>のJXSから呼び出すことはできません。

アイデア？これはすべき

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;