掌握React（二）-- 创建组件-前端-i可爱猫论坛-可爱猫小黑,致力于为易语言、PHP语言交流

掌握React（二）-- 创建组件

admin 2023-05-13 07:32:03 2102 全屏阅读只看Ta

本文覆盖基本React组件的知识，是创建健壮React应用的基础，包括创建组件、管理状态、通过props传递数据以及调试React等。

创建一个列表组

先安装bootstrap，它是一个css库，我们用它代替自带的css。

npm i [email protected]

删除App.css里的全部内容。

删除index.css文件，修改Main.tsx，导入bootstrap的css.

import 'bootstrap/dist/css/bootstrap.css'

我们发现网页有所变化，比如Hello World的显示位置已在左上角，字体也不一样了，说明bootscrap的css起作用了。

下面我们来创建ListGroup组件。

在src文件夹下新建components文件夹，再在其下新建ListGroup.tsx文件。

function ListGroup(){
    return <h1>List Group</h1>
}

export default ListGroup;

再到App.tsx，我们不再用Message组件了，删除它，再导入ListGroup。

import ListGroup from "./components/ListGroup"
function App(){
  return <div><ListGroup /></div>
}

export default App

页面上现在已显示 List Group了。

为了显示效果，我们要去bootstrap借用一些代码。

访问 https://getbootstrap.com，再点 'Docs'，再在左侧栏Components分类里找到List group，选择'Basic Example'并拷贝 html代码，粘贴到ListGroup组件中。我们要将这些html示例代码中的'class'改成’className'（按ctrl + d可以选择多行同样的内容，方便批量修改），因为class是Javascript和Typescript中的保留字，不能在jsx中使用。

function ListGroup(){
    return (
        <ul className="list-group">
            <li className="list-group-item">An item</li>
            <li className="list-group-item">A second item</li>
            <li className="list-group-item">A third item</li>
            <li className="list-group-item">A fourth item</li>
            <li className="list-group-item">And a fifth one</li>
        </ul>
  )
}

export default ListGroup;

网页上List Group变成了与bootstrap上的一致了。

目前列表项是硬编码的，有点乏味，下一节继续。

打包多个分段

我们需要在列表组添加标题，直接加上 <h1>List</h1>将会出错。原因是现在有两个并列的标记 h1 和 ul，React的jsx最终是要转换成javascript代码的，不能同时返回两个，所以我们要把它用一个标记包起来。

...
            <h1>List</h1>
            <ul className="list-group">
                <li className="list-group-item">An item</li>
                ...
            </ul>
...

最常规的是用div包起来，但为了包起来，就增加一个DOM元素div，没必要；一般是选择Fragment包起来。

function ListGroup(){
    return (
        <Fragment>
            <h1>List</h1>
            <ul className="list-group">
                ...
            </ul>
        </Fragment>
  )
}

还有一种更好的，就是直接用空内容的尖括号，React会自动使用Fragment包起来。

return (
        <>
            <h1>List</h1>
            <ul className="list-group">
                ...
            </ul>
        </>
  )

渲染列表

我们将列表项改成动态生成的。首先定义一个数组items，然后显示在列表项中。在React中的JSX中，是不能使用 for ...in 的语法来循环生成列表项，我们使用了数组的map方法，映射每个表项为另一个类型的表项，map里使用箭头函数，这里我们映射成 <li>{item}</li>。前面我们说过，用大括号将表达式包起来，这样我们就能自动生成表项。

在jsx语法中，要么是html格式，要么是组件，这里的items.map(...)是不受识别的，于是在它的外面也加了大括号。

const items =   ["New Youk", "San Francisco", "Tokyo", "London", "Paris"];
function ListGroup() {
  return (
    <>
      <h1>List</h1>
      <ul className="list-group">
        {items.map((item) => (
          <li className="list-group-item">{item}</li>
        ))}
      </ul>
    </>
  );
}

export default ListGroup;

保存后，网页上已显示各城市的列表项了。不过我们在浏览器上按F12检查，发现有警告信息 ‘Each child in a list should have a unique "key" prop’.

这是怎么回事呢？

React需要跟踪每个页面上的元素，以便可以更新DOM，在使用列表时，每个列表项必须提供 key 属性用以标识。在实际场景中一使用ID来标识，这里我们就简单使用key={item}的值。保存，警告消失了。

<li className="list-group-item" key={item}>
            {item}
          </li>

条件渲染

有时候我们需要根据条件渲染不同的内容。比如列表项空的话，就显示“No item found”。一种简单的方法是加上判断。

...
  if (items.length === 0)
    return (
      <>
        <h1>List</h1>
        <p>No item found</p>
      </>
    );
  return (
    <>
      <h1>List</h1>
      <ul className="list-group">
      ...

<h1>List</h1>有点重复，考虑把判断逻辑移到jsx语句中，不过在jsx中不允许出现 if 等判断语句，我们使用三元表达式 {items.length === 0 ? <p>No item found</p> : null} 修改如下：

<h1>List</h1>
      {items.length === 0 ? <p>No item found</p> : null}
      <ul className="list-group">
      ...

有时候，这种逻辑语句也会污染jsx的，我们可以把这个语句移出jsx外，返回变量，再在jsx使用。

const message = items.length === 0 ? <p>No item found</p> : null;
  return (
    <>
      <h1>List</h1>
      {message}
      ...

如果需要传参数显示不同的消息，可以使用函数。

const getMessage = () => (items.length === 0 ? <p>No item found</p> : null);
  return (
    <>
      <h1>List</h1>
      {getMessage()}
      ...

我们再看一种比三元表达式更简洁的用法，可以省去后面的null 关键字，这是React开发中的常见用法。我们要学会使用。

{items.length === 0 && <p>No item found</p>}

处理事件

每一个元素都可以点击，这个事件叫做onClick，我们可以添加处理代码，比如在控制台显示'Clicked'.

...
          <li
            className="list-group-item"
            onClick={() => console.log("Clicked")}
            key={item}
          >
...

在网页上点击就能在控制台看到 Clicked 字样，说明已捕捉并处理了点击事件。我们可以处理点击事件输出对应的内容。map方法里的箭头函数除了item还有index，我们让点击直接输出这些内容。

        {items.map((item, index) => (
          ...
            onClick={() => console.log(item, index)}
            ...
        ))}

另外，onClick的处理箭头函数还可以携带参数，表示点击时的关联信息，我们可以传入,命名为event，你可以命名为e 都可以。

onClick={(event)=>console.log(evenv)}

我们点击列表项时，就输出了携带的事件信息。它是syntheticBaseEvent类，非常花哨的名称。各个浏览器的事件有所不同，SyntheticBaseEvent是包装了各浏览器点击事件的类，该类有ClientX,ClientY表示点击的位置，以及其他很多属性。

目前我们的事件处理程序用箭头函数表示并直接放置在JSX语句中，只有一行的简单逻辑是非常好，但如果事件处理程序比较复杂，再放在JSX中就不合适了，我们将处理程序提取出来放在独立的函数，比如：

const handleClick = (event)=>console.log(event)

但我们看到，这里有个警告：

Parameter 'event' implicitly has an 'any' type.ts(7006)

意思是event参数可以是任何类型，这在Typescript中是不允许的，这也是typescript的安全代码特色，更利用重构。

在JSX中的事件处理函数会自动识别event的类型，不会有警告。我们把鼠标移到上面，能看到是提示该事件是 React.MouseEvent。所以在独立函数中，我们要指定event的类型为MouseEvent。同时在JSX中onClick中引用hanleClick，注意仅是引用不是调用，不加括号。

import { MouseEvent } from "react";
function ListGroup() {
  ...
  const handleClick = (event: MouseEvent) => console.log(event);
  return (
   ...
          <li className="list-group-item" onClick={handleClick} key={item}>
   ...
  );
}

管理状态

我们希望选中的列表项高亮显示，高亮显示只需要增加 “active” 的className即可。现在要做的是能判断哪一项是选中的，然后给选中项的css的class添加 "active“。

先添加一个变量 selectedIndex，初始等于 -1 ，表示未选中，列表中index中0表示第1项。再在onClick事件处理函数中，我们修改selectedIndex为当前选择项。我们看看能否达到目标。

...
function ListGroup() {
...
  let selectedIndex = -1;
  return (
    ...
            className={
              selectedIndex === index
                ? "list-group-item active"
                : "list-group-item"
            }
            onClick={() => (selectedIndex = index)}
            ...
  );
}
...

但在页面上点击列表项，没什么变化，不会变成高亮显示。这是为什么呢？

原因是 selectedIndex只是我们在Component里定义的一个局部变量，React并不会注意它。我们需要告诉React，我们的组件有随着时间改变的数据或状态。这就要用到React的一个内建函数 :useState。

useState函数是一个钩子。钩子允许我们进入一些React内建的功能，也有其他的一些钩子，以后会介绍到。useState是个状态钩子，它告诉React有数据或状态，随着时间的推进，这些状态会变化。

代替前面的设置变量，我们调用useState，并初始化状态值。useState返两个元素，第一个是变量，比如 selectedIndex；第二个是更新函数比如setSelectedIndex，该更新函数可以更新变量，同时也告诉React组件状态已改变，然后React重新渲染组件。前面我们讲过，React不会直接处理DOM，我们可以理解成组件有状态，当状态变化时，React更新DOM以适配新的状态。

# 先导入
import {useState} from 'react'
...
  const   [selectedIndex, setSelectedIndex] = useState(1);
  return (
    ...
            onClick={() => (setSelectedIndex(index))}
            ...

这样网页就能正确高亮显示选中项了。

另外，每一个组件的状态都是独立的，比如我们在App中再添加一个ListGroup组件，在页面上分别点击，就会发现他们的高亮显示是互相独立的。

通过Props传递数据

目前的ListGroup的列表项是硬编码的，如果想重用ListGroup组件的话，我们就需要传递数据。需要传递什么数据呢？一个是列表项 items，另一个是标题 heading。Typescript使用Interface定义数据结构，我们创建一个并命名为Props，有些人可能喜欢加前缀的命名如ListGroupProps，这都是可以的。注意typescript 的使用，在定义数组items或字义变量heading时都指定了数据类型，有助于我们及早在编译时而不是运行时才发现错误。

interface Props {
  items: String  [];
  heading: String;
}

修改后的ListGroup.tsx如下，我们传入ListGroup一个Props的数据结构，为了简洁，我们直接解构：{ items, heading }: Props 这样代码就可以直接用这两个变量名。

interface Props {
  items: String  [];
  heading: String;
}
function ListGroup({ items, heading }: Props) {
  ...
      <h1>{heading}</h1>
      {items.length === 0 && <p>No item found</p>}
      <ul className="list-group">
        {items.map((item, index) => (
          ...

现在我们到App.tsx传递数据给ListGroup。先定义items，然后在使用ListGroup提供items和heading的数据即可实现传递。

function App() {
  let items =   ["New Youk", "San Francisco", "Tokyo", "London", "Paris"];
  return (
    <div>
      <ListGroup items={items} heading="cities" />
    </div>
  );
}

完成后，测试页面正常。

通过Props传递函数

在实际场景中，我们点击选择一个列表项，会有一些操作发生，比如筛选列表，或引导用户进入另一个页面等等。如果直接在ListGroup组件中实现相关操作，将导致ListGroup不可重用，我们要将列表选择这个消息通知客户或者说父级组件，由父级组件来处理，在我们这里，就是通知App组件。这样ListGroup组件就可以重用了。那如何做呢？

很简单，先在ListGroup组件的Props中添加第三个属性onSelectItem指定处理函数的格式。

interface Props {
  items: String  [];
  heading: String;
  onSelectItem: (item: String) => void;
}

再在onClick中调用 onItemSelected。

onClick={() => {
              ...
              onSelectItem(item);
            }}

然后在App组件中调用ListGroup时提供处理函数。一般以handle开头，比如这里就是handleItemSelected.该处理函数简单输出对应的列表项条目。

const handleSelectItem = (item:String) => {
    console.log(item);
  };
  return (
    <div>
      <ListGroup
        ...
        onSelectItem={handleSelectItem}
      />
    </div>
  );
}

完成后，网页上点击列表项，就能在控制台输出列表项。

State和Props对比

Props是外部传递给组件的，而State则是组件自己管理的。

Props像函数的参数，而State像本地变量。

不要改变Props，比如我们不应该在ListGroup中重新设置heading=''，在React中，我们要遵守它的哲学，尽管程序不会提示说不能修改。而State本身就是为了改变而存在的。

两者也有共同点，它们的改变都会让React重新渲染页面。

传递子项

组件包裹的部分，称之为子项，比如有一个组件Test，我们调用它：<Test>Hello World</Test>，这里的Hello World就是子项，Test组件可以接收这个子项信息，从而进行相关处理。如何做？

创建一个新组件 components/Alert.tsx，在键入代码之前我们安装一个vscode插件: ES7+ React/Redux/React-Native snippets。该插件可以快速生成一些React代码片段，免得手输。

在Alert.tsx中，输入 rafce，然后回车，就自动生成了一个由箭头函数形成的Alert组件。我们再作下修改，添加interface,键值使用children，这是一个保留关键字，表示传递的是子项。为了使显示美观，到getbootstrap网站查找css,加了 "alert alert-primary".

import React, { Children } from "react";
interface Props {
  children: String;
}

const Alert = ({ children }: Props) => {
  return <div className="alert alert-primary">{children}</div>;
};

export default Alert;

再到App.tsx，为了演示清晰，将原来的ListGroup组件去掉，替换成Alert组件。注意Hello World是作为子项传递。保存后页面就显示Hello World了。

import Alert from "./components/Alert";
function App() {
  return (
    <div>
      <Alert>Hello World</Alert>
    </div>
  );
}
export default App;

如果我们希望在子项中传递带有html标记的内容,如

<Alert>Hello <span>World</span></Alert>

我们就要修改children的类型为ReactNode.

interface Props {
  children: ReactNode;
}

使用React开发工具检查组件

谷歌浏览器、微软EDGE、Firefox均有React开发工具插件(React Developer Tools)，对于分析检查组件比较有用。

安装之后在开发者工具里就增加了Componets标签，点击可以查看网页组件的构成，查找具体的组件、查看源码等。很多功能都一目了然，这里不详述。

练习：创建一个按钮组件

查看getbootstrap网站的Button样式，我们将它封装成可重用的按钮组件。

直接给出结果，Button.tsx:

interface Props {
  children: string;
  onClick: () => void;
  color: string;
}

const Button = ({ children, onClick, color }: Props) => {
  return (
    <button className={"btn btn-" + color} onClick={onClick}>
      {children}
    </button>
  );
};

export default Button;

App.tsx:

import Button from "./components/Button";
function App() {
  return (
    <div>
      <Button color="success" onClick={() => console.log("clicked")}>
        My Button
      </Button>
    </div>
  );
}

export default App;

有些小问题。

要是App组件调用Button时不提供 color属性怎么办？我们应该有个默认值，免得报错。另外，如果提供的color是无效的话将会使页面显示不正常，也要限制。

在Props属性 color后加问号？，表示是可选的，我们也限制color的值只允许primary,danger,secondary中的一个。同时我们给color也提供了一个默认值：color = 'primary'

interface Props {
  ...
  color?: "primary" | "danger" | "secondary";
}

const Button = ({ children, onClick, color = "primary" }: Props) => {
  ...
};

练习：显示警告栏

继续做练习。

当我们按下按钮时，我们希望顶部显示一个警告栏，该警告栏右上角有个关闭小按钮允许手动关闭。

警告栏关闭小按钮可以查询bootstrap的Alert的Dismissing部分，有相应的class。

我们在App组件中增加一个State，用来指示是否显示警告栏。还有当我们点击警告栏的关闭按钮，也需要将该事件通知给App组件处理。

Alert.tsx:

interface Props {
  children: string;
  onClose: () => void;
}

const Alert = ({ children, onClose }: Props) => {
  return (
    <div className="alert alert-warning alert-dismissible">
      {children}
      <button
        type="button"
        className="btn-close"
        data-bs-dismiss="alert"
        aria-label="Close"
        onClick={onClose}
      ></button>
    </div>
  );
};

export default Alert;

App.tsx:

import { useState } from "react";
import Alert from "./components/Alert";
import Button from "./components/Button";
function App() {
  const   [alertVisible, setAlertVisibility] = useState(false);
  return (
    <div>
      {alertVisible && (
        <Alert onClose={() => setAlertVisibility(false)}>My Alert</Alert>
      )}
      <Button onClick={() => setAlertVisibility(true)}>My Button</Button>
    </div>
  );
}

export default App;

效果如下：