在一天之内准备好数据网格从未如此简单。 尝试我们的网格 构建注释组件 在这里,我们将构建我们的注释组件,它将成为 中东移动数据库 每个列表在我们的应用程序中的外观的基本组件,为此,让我们在项目的目录中创建一个组件文件夹,并创建一个新文件,并在src其中Note.jsx写入下面的代码块。
在这里,useStoreActions来自 easy-peasy 的钩子使我们的Note组件能够访问商店中的操作,在本例中是toggleNote划掉已完成的注释并addNote添加新注释。我们返回了li包含新注释的标签。
接下来,我们为应用程序添加了一个删除按钮,类似于切换注释,我们添加了一个onClick接受操作的事件removeNote,如果我们正确执行此操作,我们的应用程序应该如下图所示。
注释组件。 注释组件。(大预览) 构建注释组件
该组件将充当我们的笔记的渲染器,在这里我们将为我们的应用程序名称添加一个标头组件,并在该组件中渲染我们的所有笔记,让我们在下面执行此操作。 在这里,我们useStoreState从 easy-peasy 导入了钩子,授予useStoreState我们的组件访问商店状态的权限,
接下来我们创建了一个功能组件注释并使用我们分配useStorestate给notes在商店中找到的应用程序的状态。
|