render-view

描述

经过 div 封装后的 react 组件，你可以理解 View 是一个容器组件，用于包括任何元素和组件。View 提供 appear 相关事件，你可以利用此特性，做一些特别的事情

安装

1$ npm install render-view --save

属性

属性	类型	默认值	必填	描述
className	string	-	false	自定义样式名
style	CSSProperties	-	false	自定义样式
onClick	function	-	false	点击
onAppear	function	-	false	当前元素可见时触发
onDisappear	function	-	false	当前元素从可见变为不可见时触发
onFirstAppear	function	-	false	当前元素首次可见时触发
onTouchStart	function	-	false	触摸动作开始
onTouchMove	function	-	false	触摸后移动
onTouchEnd	function	-	false	触摸动作结束
onTouchCancel	function	-	false	触摸动作被打断，如来电提醒，弹窗

示例

1import { useRef, useEffect } from "react";
2import View from "render-view";
3
4const App = () => {
5  const viewRef = useRef(null);
6  useEffect(() => {});
7  return (
8    <View
9      ref={viewRef}
10      style={{
11        padding: "30rpx",
12      }}
13      onClick={() => {
14        alert("container was clicked!");
15      }}
16    >
17      <View
18        style={{
19          width: "300rpx",
20          height: "300rpx",
21          backgroundColor: "red",
22        }}
23        onClick={(e) => {
24          e.stopPropagation();
25          alert("red was clicked");
26        }}
27      />
28      <View
29        style={{
30          width: "300rpx",
31          height: "300rpx",
32          backgroundColor: "green",
33          position: "absolute",
34          top: "20rpx",
35          left: "20rpx",
36        }}
37        onClick={() => {
38          alert("green was clicked");
39        }}
40      />
41      <View
42        style={{
43          width: "300rpx",
44          height: "300rpx",
45          backgroundColor: "yellow",
46          position: "absolute",
47          top: "80rpx",
48          left: "210rpx",
49        }}
50        onClick={(e) => {}}
51      />
52    </View>
53  );
54};
55export default App;

默认样式

render-view 默认样式如下：

1.render-view-v1 {
2  box-sizing: border-box;
3  display: flex;
4  flex-direction: column;
5  flex-shrink: 0;
6  align-content: flex-start;
7  border: 0 solid black;
8  margin: 0;
9  padding: 0;
10  min-width: 0;
11}