robotfriend(一)

最新推荐文章于 2024-12-28 03:59:13 发布

原创最新推荐文章于 2024-12-28 03:59:13 发布 · 228 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react

机器人朋友网站专栏收录该内容

2 篇文章

订阅专栏

这篇博客讲述了如何生成一个新的React项目，并添加全局包裹。详细步骤包括新建项目、构建Card组件，使用robots.js数据并引入tachyons进行样式设置。在CardList组件中遍历数据并展示，同时介绍了在App.js中整合Title、SearchBox和卡片列表。SearchBox使用state进行数据交互，通过onChange事件处理搜索功能，过滤并更新显示的机器人列表。

生成一个新的react 项目

添加一个全局包裹
在这里插入图片描述
新建一个react项目

创建成功后

先build项目
在这里插入图片描述

然后运行项目
在这里插入图片描述

Build card component for Robot friend

构建Card组件

目前而言只需要一个index.js和index.css
APP.js App.css和logo.svg可以都不要
在这里插入图片描述

首先建立card组件。新建一个文档card.js
其中有三个参数，姓名，邮件，id
一个card中由三部分组成：图片姓名邮件
图片由这个机器人网站生成
因此我们JSX组成部分如下
在这里插入图片描述
Card组件需要引入index.js
一共设置了三个card
分别从robots.js中引入参数

robots.js包含了大量的信息
因为没有用 export default，因此在引入index.js中要加括号
同时为了设置css,引入tachyons

在这里插入图片描述

遍历robots.js 得到卡片列

新建一个cardlist.js
在这里插入图片描述
引用时,robots作为参数传进去

在cardlist对robots做遍历数组，最好加一个key，i为遍历的数
在这里插入图片描述

Title和Search box

现在不止卡片了，还要有title和搜索框。就用一个app.js将整体都放在一起。

在这里插入图片描述
从上到下分别是标题，搜索框和卡片

而搜索框目前而言是个简单的Input，注意 EXPORT Searchbox 开头最好大写。

搜索框数据交互

我们在这里要用到state
props是从来不改变的，input给的是什么就是什么。
而state可以变化。
将state放在父组件里面，这样一旦子组件有变化，父组件会知道，父组件pass state as props。
为了能用到state，我们需要新建一个类变成 Class App extends Component
在这里插入图片描述

在这里插入图片描述
需要一个constructor，在定义state之前，需要有个super()

OnSearchChange 是父组件中的一个函数,参数是发生的event
将它pass给searchbox

在searchbox中 HTML有个property onChange，一旦发生变化召唤某函数。

此刻在父组件中的 Onsearchchange就开始工作
在这里插入图片描述

把输入的信息传递给Robots查找

用filter和includes()可以查找包含特定字符串的名字。
并且不能忘了要用setState更新searchfield
在这里插入图片描述
但是我们只想显示查找到的robots,原来robots={this.state.robots}包含了所有的机器人。
我们把filterR这个变量移动到render里面，更新robot