alita中组件的自定义与组件的再封装

前情提要

在alita项目开发过程中，常常会用到很多包装好的组件，如antd中的所有组件。别人封装好的组件很多情况下总是不符合自己的口味，那么今天就讲一讲如何自定义组件以及对已有组件的再封装。

自定义组件

如何自定义

• 我们都知道，若要使用antd中的某个组件，需要一个import操作(如：import { Button } from 'antd-mobile';)，那么我们想，是否自己也可以定义一个组件包，之后在开发过程中import进来就好。

• 那么为什么import就能使用到导入进来的组件呢，是不是在某处提供一个调用入口呢。分析到这里，突然想到export与句，它与import相反，它是导出。

• 继续思考。那么如何使用这个export。这就是今天主要讨论的问题。

components文件夹

我们自己定义的组件需要统一放入一个文件中，这样才能统一管理，于时在src文件夹下新建文件夹components(插件)，之后定义一个tsx文件(如：test.tsx)。

test.tsx文件

• export的使用。按照react的语法，首先写一个函数：

src/components/test.tsx

 export default function Test() {
 	...;
 	return (
		...;
	);
 }

• 从函数结构中可以看出return内部的数据将被export出去，所以我们知道了我们需要在此处定义一个jsx格式的组件。

• 那么现在开始尝试。

页面中导入组件

• 我们在任意页面使用导入并使用。

src/pages/index.tsx

...
import Test from '@/components/test';
...
const IndexPage: FC<PageProps> = ({ dispatch }) => {
    ...
    return (
	    <Test />
    );
};
...

• 刷新页面发现什么都没有，并且没有报错，说明成功构建了一个空的组件。

一个最简单的组件

• 这里开始正式定义自己的组件

src/components/test.tsx

return (
	<h1>大家好！！！</h1>
);

这样是否可行呢，刷新页面得到：

• 成功了！！！

• 但是我继续思考，这样简单的组件没用啊，很多时候得传递参数。

向组件里传递参数

• 怎么传递参数呢？因为我们用的是react语法，所以我去看react文档，发现了这个：

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

• 模仿这个语法：

src/components/test.tsx

 export default function Test(props: any) {
 	return (
		<h1>大家好！！！{props.name}</h1>
	);
 }

src/pages/index.tsx

 return (
 	<Test name="Sara" />
 );

运行结果：

• 传参也成功了，复杂对象什么的也可以当作参数，使用方式与react官方文档一样，这里不赘述。

定义默认参数

• 到现在为止和antd中的组件还是有一些差别：antd组件中的一些属性会有默认值，当不人为传入参数值时，会使用它。

• 我们也要像antd组件一样具有默认值。

• 上代码：

src/components/test.tsx

import React from 'react';

export default function Test(props: any) {

  const {	// 当props中含有某属性时会将默认的覆盖
    id = "123456",
    name = "aolyu",
    age = 18,
    like = { fruit: 'apple', vegetable: 'lettuce' }
  } = props

  return (
    <div>
      <div><strong>学号: </strong>{id}</div>
      <div><strong>姓名: </strong>{name}</div>
      <div><strong>年龄: </strong>{age}</div>
      <div>
        <strong>喜欢: </strong>
        <div>
          <strong>水果：</strong>{like.fruit}
          <strong>蔬菜：</strong>{like.vegetable}
        </div>
      </div>
    </div>
  );
}

调用方式一：
src/pages/index.tsx

return (
  <Test />
);

运行结果：

调用方式二：

return (
  <Test age={17} />
);

运行结果：

• 以上两种调用方式已经很直观，大家可以灵活使用。

• 那么到此为止，自定义组件就讲解完毕。

组件再封装

• 有了自定义组件的经验，其实组件再封装就很简单了，大致思想是：
  将已有组件import进来，对此组件操作，最后export出去

• 上代码(Button为例)：将两个按钮封装在一起，并传递一些参数。

src/components/test/tsx

import React from 'react';
import { Button } from 'antd-mobile'

export default function DoubleButton(props: any) {

  const {
    type1 = "",
    type2 = "",
  } = props

  return (
      <Button type={type1}>按钮1</Button>
      <Button type={type2}>按钮2</Button>
    </>
  );
}

src/pages/index.tsx

return (
	<DoubleButton type1={"primary"} type2={"warning"} />
);

运行结果：

• 这只是一个例子，在不同项目中需要根据不同需求来定义组件，来封装一些已经定义好的组件，希望大家能够举一反三。

---

本人学历有限，有问题的地方希望诸位给出指导，谢谢

---

本文地址：https://blog.csdn.net/weixin_44901846/article/details/107375529