在alita项目开发过程中,常常会用到很多包装好的组件,如antd中的所有组件。别人封装好的组件很多情况下总是不符合自己的口味,那么今天就讲一讲如何自定义组件以及对已有组件的再封装。
import { Button } from 'antd-mobile';
),那么我们想,是否自己也可以定义一个组件包,之后在开发过程中import
进来就好。import
就能使用到导入进来的组件呢,是不是在某处提供一个调用入口呢。分析到这里,突然想到export
与句,它与import
相反,它是导出。export
。这就是今天主要讨论的问题。我们自己定义的组件需要统一放入一个文件中,这样才能统一管理,于时在src文件夹下新建文件夹components
(插件),之后定义一个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>
);
这样是否可行呢,刷新页面得到:
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" />
);
运行结果:
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
如对本文有疑问, 点击进行留言回复!!
Unity UGUI 之 实现按钮 Button 长按和双击的功能效果
[U3D Learning Note] Unity C# Surival Guide (1) -- Quick Tips and Assets
网友评论