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

因此，我试图创建一个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'
};

但是它没有用。

最佳答案

您可以使用三元运算符有条件地呈现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>

关于html - 如何在react中添加默认属性或值，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57016001/