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

news2025/4/2 23:45:42

文章目录

- 1 组件基础
- 2 组件props
- 3 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;