Question

因此，我试图创建一个todoList，并且只要数组列表项为空，我都想显示一个文本“ No todo to show”。

这是我的TodoList组件：

render() {

        const {items, clearList, handleDelete, handleEdit} = this.props;

        return (
            <ul className='list-group my-5'>
                <h3 className='text-capitalize text-center'>Todo List</h3>

                {

                items.map(item => {
                    return (
                        <TodoItem key={
                                item.id
                            }
                            title={
                                item.title
                            }
                            handleDelete={
                                () => handleDelete(item.id)
                            }
                            handleEdit={
                                () => handleEdit(item.id)
                            }/>
                    );
                })
            }
                <button type='button' className='btn btn-danger btn-block text-uppercase mt-5'
                    onClick={clearList}>Clear List</button>
            </ul>
        );

    }

这是我的TodoItem组件：

render() {
        const {title, handleDelete, handleEdit} = this.props;
        return (
            <li className='list-group-item text-capitalize d-flex justify-content-between my-2'>
                <h6>{title}</h6>
                <div className='todo-icon'>
                    <span className='mx-2 text-success'
                        onClick={handleEdit}>
                        <i className='fas fa-pen'/>
                    </span>

                    <span className='mx-2 text-danger'
                        onClick={handleDelete}>
                        <i className='fas fa-trash'/>
                    </span>
                </div>
            </li>
        )
    }

我尝试过的一件事是将其插入TodoItem组件中：

TodoItem.defaultProps = {
    title: 'Hello'
};

但是它不起作用。

Answer 1

您可以使用三元运算符有条件地呈现jsx。

<ul className="list-group my-5">
  <h3 className="text-capitalize text-center">Todo List</h3>

  {items.length > 0 ? (
    items.map(item => {
      return (
        <React.Fragment>
          <TodoItem
            key={item.id}
            title={item.title}
            handleDelete={() => handleDelete(item.id)}
            handleEdit={() => handleEdit(item.id)}
          />
          <button
            type="button"
            className="btn btn-danger btn-block text-uppercase mt-5"
            onClick={clearList}
          >
            Clear List
          </button>
        </React.Fragment>
      );
    })
  ) : (
    <p>No todo to show</p>
  )}
</ul>

Answer 2

您可以这样做

{ items.length >0 ?

    items.map(item =>
    {
        return ( <
            TodoItem key = {
                item.id
            }
            title = {
                item.title
            }
            handleDelete = {
                () => handleDelete(item.id)
            }
            handleEdit = {
                () => handleEdit(item.id)
            }
            />
        );
    })
    :
    <div>No todo to show</div>
}

要添加默认标题，您可以这样做

<h6>{title || `Hello`}</h6>

如何在react中添加默认属性或值

2 个答案: