0301-组件基础-react-仿低代码平台项目

1 组件基础

React中一切都是组件，组件是React的基础。

• 组件就是一个UI片段
• 拥有独立的逻辑和显示
• 组件可大可小，可嵌套

组件的价值和意义：

• 组件嵌套来组织UI结构，和HTML一样。
• 组件拆分，利于代码维护和多人协作开发。
• 可封装公共组件（或第三方组件），复用代码，提高开发效率。

示例：创建问卷列表页面

import { useState } from "react";
import type { MouseEvent } from "react";

import reactLogo from "./assets/react.svg";
import viteLogo from "/vite.svg";
import "./App.css";

function App() {
  const [count, setCount] = useState(0);

  const fn = (e: MouseEvent<HTMLButtonElement>, name: string): void => {
    e.preventDefault(); // 阻止默认行为
    e.stopPropagation; // 阻止冒泡
    console.log("clicked");
    console.log("name: " + name);
  };

  const list = [
    { name: "张三", age: 18 },
    { name: "李四", age: 22 },
    { name: "王五", age: 23 },
    { name: "六子", age: 54 },
  ];
  return (
    <>
      <div>
        <a href="https://vite.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1 style={{ color: "red", backgroundColor: "white" }}>Vite + React</h1>
      <div>
        <label htmlFor="name">姓名：</label>
        <input id="name" type="text" />
      </div>
      <div>
        <button
          type="button"
          onClick={(e) => {
            fn(e, "button");
          }}
        >
          点击
        </button>
      </div>

      <ul>
        {list.map((user) => {
          const { name, age } = user;
          return <li key={name}>{age}</li>;
        })}
      </ul>

      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.tsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  );
}

export default App;

拆分列表为列表组件和问卷卡片组件，列表组件如下：

import React, { FC } from "react";

import QuestionCard from "./QuestionCard";
const List1: FC = () => {
  //列表页

  //问卷列表数据
  const questionList = [
    { id: "q1", title: "问卷1", isPublished: false },
    { id: "q2", title: "问卷2", isPublished: false },
    { id: "q3", title: "问卷3", isPublished: true },
    { id: "q4", title: "问卷4", isPublished: false },
    { id: "q5", title: "问卷5", isPublished: true },
  ];

  return (
    <div>
      <h1>问卷列表页</h1>
      <div>
        {questionList.map((q) => {
          const { id, title, isPublished } = q;
          return (
            <QuestionCard
              key={id}
              id={id}
              title={title}
              isPublished={isPublished}
            />
          );
        })}
      </div>
    </div>
  );
};

export default List1;

问卷卡片组件如下：

import React, { FC } from "react";

import "./QuestionCard.css";

type PropsType = {
  id: string;
  title: string;
  isPublished: boolean;
};

const QuestionCard: FC<PropsType> = (props) => {
  const { id, title, isPublished } = props;

  //编辑问卷
  function edit(id: string) {
    console.log("id:", id);
  }

  return (
    <div key={id} className="list-item">
      <strong>{title}</strong>
      &nbsp;
      {/* 条件判断 */}
      {isPublished ? (
        <span style={{ color: "green" }}>已发布</span>
      ) : (
        <span>未发布 </span>
      )}
      &nbsp;
      <button onClick={() => edit(id)}>编辑问卷</button>
    </div>
  );
};

export default QuestionCard;

2 组件props

在 React 中，Props（属性）是用于将数据从父组件传递到子组件的机制，Props 是只读的，子组件不能直接修改它们，而是应该由父组件来管理和更新。

state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。

详细可以参考下面链接2，上面我们函数组件通过参数传递方式传递（按需传递）props。

props传递可以通过…也可以单个props属性传递，建议**“按需传递”**。

3 React开发者工具

日常工作中，代码开发占很小一部分，其中调试是必不可少的。

为了方便调试开发React，这么我们以chome为例。

安装工具：

• chome应用商店或者第三方插件网站（参考下面链接3）

2个标签页：

• components：组件，可以搜索，查看指定组件的props,source等
• profiler：分析器

结语

❓QQ:806797785

⭐️仓库地址：https://gitee.com/gaogzhen

⭐️仓库地址：https://github.com/gaogzhen

[1]传递 Props[CP/OL].

[2]React Props[CP/OL].

[3]整理了几个Chrome插件的国内下载网站[CP/OL].