React集成Jira Service Management嵌入组件：内联显示等需求咨询

官方支持的配置方案 #

针对你的三个需求，JSM嵌入组件提供了官方原生的data属性配置，无需依赖CSS覆盖或复杂的动态加载逻辑：

1. 默认打开组件 #

给嵌入脚本添加data-auto-open="true"属性，组件加载后会自动展开：

<script
  data-jsd-embedded
  data-key="xxxxxxxxxxxxxxxxxxxxx"
  data-base-url="https://jsd-widget.atlassian.com"
  data-auto-open="true"
  src="https://jsd-widget.atlassian.com/assets/embed.js">
</script>

2. 内联渲染组件 #

官方支持内联渲染模式，需要先在页面中定义一个容器元素，再通过脚本属性指定渲染目标：

<!-- 页面中添加内联容器，可通过CSS调整位置（如居中、卡片下方） -->
<div id="jsd-inline-container" style="margin: 20px auto; max-width: 600px;"></div>

<!-- 配置内联渲染的脚本 -->
<script
  data-jsd-embedded
  data-key="xxxxxxxxxxxxxxxxxxxxx"
  data-base-url="https://jsd-widget.atlassian.com"
  data-inline="true"
  data-container-selector="#jsd-inline-container"
  src="https://jsd-widget.atlassian.com/assets/embed.js">
</script>

3. 禁用浮动启动按钮 #

• 当启用内联模式（data-inline="true"）时，浮动按钮会自动隐藏；
• 非内联模式下，可添加data-hide-trigger="true"属性强制禁用：

<script
  data-jsd-embedded
  data-key="xxxxxxxxxxxxxxxxxxxxx"
  data-base-url="https://jsd-widget.atlassian.com"
  data-hide-trigger="true"
  src="https://jsd-widget.atlassian.com/assets/embed.js">
</script>

React中动态加载的正确写法 #

如果需要在React中动态渲染，需确保脚本的所有data属性都设置完成后再加载src，避免属性未生效：

import { useEffect } from 'react';

const JsmInlineEmbed = () => {
  useEffect(() => {
    const script = document.createElement('script');
    // 配置所有必要属性
    script.dataset.jsdEmbedded = '';
    script.dataset.key = 'xxxxxxxxxxxxxxxxxxxxx';
    script.dataset.baseUrl = 'https://jsd-widget.atlassian.com';
    script.dataset.inline = 'true';
    script.dataset.containerSelector = '#jsd-inline-container';
    script.dataset.autoOpen = 'true';
    
    script.src = 'https://jsd-widget.atlassian.com/assets/embed.js';
    const container = document.getElementById('jsd-inline-container');
    container?.appendChild(script);

    // 组件卸载时清理脚本
    return () => script.remove();
  }, []);

  return <div id="jsd-inline-container" className="your-custom-styles" />;
};

export default JsmInlineEmbed;

替代方案（若官方嵌入不满足需求） #

如果官方内联模式仍无法适配你的场景，可考虑以下两种方案：

• 自定义表单 + JSM REST API：完全自主构建表单UI，通过JSM的REST API提交服务请求，实现100%的样式和交互控制，适合高度定制化需求；
• iframe直接嵌入表单：在JSM后台生成表单的嵌入链接，将其放在页面的iframe标签中，通过CSS控制iframe的位置、尺寸，这种方式轻量化且无需复杂逻辑，定制性略弱但实现简单。

内容的提问来源于stack exchange，提问作者Test Wenger