feat: ✨krpano组件支持设置target和id

0xLLLLH · Dec 18, 2020 · cd396af · cd396af
1 parent 6e29761
commit cd396af
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/docs/components.md b/docs/components.md
@@ -8,6 +8,8 @@ Krpano组件负责krpano的初始化。
 |:--|:--:|:--:|:--|
 | className | string |  | 根节点的className|
 | currentScene | string | | 当前展示的场景名，需要与Scene的name属性对应 |
+| target | string | | 组件渲染的dom元素的id，krpano将被渲染到该元素上 |
+| id | string | | 内部JavaScriptInterfaceObjective的id，多个krpano实例的id需要不同 |
 | xml | string | | xml地址，可以通过该参数直接展示全景图。也是后续渲染的基础。 |
 | onReady | EventCallback |  | krpano的onready回调触发后调用 |
 

diff --git a/src/components/Krpano.tsx b/src/components/Krpano.tsx
@@ -11,10 +11,12 @@ interface KrpanoProps {
     currentScene?: string;
     /** Krpano XML地址 */
     xml?: string;
+    target?: string;
+    id?: string;
     onReady?: (renderer: KrpanoActionProxy) => void;
 }
 
-const Krpano: React.FC<KrpanoProps> = ({ className, currentScene, xml, onReady, children }) => {
+const Krpano: React.FC<KrpanoProps> = ({ className, currentScene, target = 'krpano', id, xml, onReady, children }) => {
     const [renderer, setRenderer] = React.useState<KrpanoActionProxy | null>(null);
     const onReadyCallback = React.useCallback(
         (obj: NativeKrpanoRendererObject) => {
@@ -31,15 +33,16 @@ const Krpano: React.FC<KrpanoProps> = ({ className, currentScene, xml, onReady,
     );
 
     useKrpano({
-        target: 'krpano',
+        target,
+        id,
         xml: xml || null,
         onready: onReadyCallback,
     });
 
     return (
         <KrpanoRendererContext.Provider value={renderer}>
             <CurrentSceneContext.Provider value={currentScene || null}>
-                <div id="krpano" className={className}>
+                <div id={target} className={className}>
                     {renderer ? children : null}
                 </div>
             </CurrentSceneContext.Provider>