fix(react): add View component to proxy react event to process stopPr…

…opagation, close #973

components/view/index.ts

@@ -0,0 +1,24 @@
+import { Component, createVNode as h, TypeDefs } from 'intact';
+
+export interface ViewProps {
+    tag?: string,
+} 
+
+const typeDefs: Required<TypeDefs<ViewProps>> = {
+    tag: String,
+};
+
+/**
+ * A component only used in React or Vue to bind event, so that
+ * it can use Intact Event system to stop propagation (stopPropagation).
+ */
+export class View extends Component<ViewProps> {
+    static template(this: View) {
+        const { tag, ...rest } = this.get();
+        return h(tag!, rest as any);
+    }
+    static typeDefs = typeDefs;
+    static defaults() {
+        return { tag: 'div' };
+    }
+}

docs/react.md

@@ -36,7 +36,7 @@ class App extends React.Component {
 
 # 注意事项
 
-当需要将vNode作为属性传给KingDesign组件时，需要使用`normalize`方法处理vNode
+1. 当需要将vNode作为属性传给KingDesign组件时，需要使用`normalize`方法处理vNode
 
 > 如果是作为子元素`children`，则没有必要`normalize`，因为组件默认会normalize子元素
 
@@ -55,3 +55,21 @@ class App extends React.Component {
     }
 }
 ```
+
+2. React 17中，因为事件绑定在root元素而非document上，react元素stopPropagation，会导致所有KingDesign组件
+相应事件失效，因为KingDesign组件的事件是委派到document上的， root元素stopPropagation会使事件不会继续
+冒泡的document。
+
+针对这个情况，需要将react元素转化为KingDesign组件，用`View`组件替换react中的`div` `span`等元素
+
+```jsx
+import { View, Checkbox } from '@king-design/react';
+
+export const Demo = () => {
+    return <View onClick={(e) => e.stopPropagation()}>
+        <Checkbox />
+    </View>
+}
+```
+
+> View组件默认渲染成div，如果需要渲染成其他元素，使用tag属性指定

index.ts

@@ -63,6 +63,7 @@ export * from './components/transfer';
 export * from './components/tree';
 export * from './components/treeSelect';
 export * from './components/upload';
+export * from './components/view';
 export * from './components/wave';
 
 export const version = '3.2.2-beta.0';