如何扩展Streamlit现有组件？求添加自定义JS的教程示例

目前Streamlit官方文档确实没有专门针对扩展现有组件的完整教程，但可以通过以下几种实用方式实现对st.file_uploader这类原生组件的自定义：

• 用components.html嵌入自定义JS操作DOM
  先渲染原生组件，再通过嵌入的JavaScript定位组件DOM元素，添加自定义逻辑。比如给st.file_uploader加文件选择后的提示：

  import streamlit as st
  import streamlit.components.v1 as components
  
  # 渲染原生文件上传组件
  st.file_uploader("选择要上传的文件")
  
  # 嵌入自定义JS代码
  components.html("""
  <script>
  // 通过测试ID定位文件上传组件
  const uploaderContainer = window.parent.document.querySelector('[data-testid="stFileUploader"]');
  if (uploaderContainer) {
    // 获取文件输入框
    const fileInput = uploaderContainer.querySelector('input[type="file"]');
    // 添加文件选择事件监听
    fileInput.addEventListener('change', (event) => {
      const selectedFiles = event.target.files;
      if (selectedFiles.length > 0) {
        alert(`已选择${selectedFiles.length}个文件，第一个文件名：${selectedFiles[0].name}`);
      }
    });
  }
  </script>
  """, height=0)
  

  可以通过浏览器开发者工具（右键→检查元素）查看组件的data-testid属性，以此定位不同的Streamlit原生组件。

• 借助streamlit-javascript库执行JS逻辑
  使用第三方库streamlit-javascript可以更便捷地执行自定义JS，无需手动写HTML模板：

  import streamlit as st
  from streamlit_javascript import st_javascript
  
  st.file_uploader("上传文件")
  
  # 执行自定义JS，添加文件大小限制
  exec_result = st_javascript("""
  const fileInput = window.parent.document.querySelector('[data-testid="stFileUploader"] input[type="file"]');
  if (fileInput) {
    fileInput.onchange = function(e) {
      const maxSize = 5 * 1024 * 1024; // 5MB
      for (const file of e.target.files) {
        if (file.size > maxSize) {
          alert(`文件${file.name}大小超过5MB限制，请重新选择`);
          e.target.value = ''; // 清空已选文件
          break;
        }
      }
    };
    return "已成功添加文件大小验证逻辑";
  }
  return "未找到文件上传组件";
  """)
  
  st.write(exec_result)
  

  使用前需要先安装库：pip install streamlit-javascript

• 深度扩展：基于原生组件源码封装新组件
  如果需要更复杂的自定义功能，可以参考Streamlit官方仓库中st.file_uploader的前端源码，在其基础上修改添加自定义JS逻辑，再封装成新的自定义组件。这种方式适合长期维护的复杂场景，但需要具备一定的前端开发能力。

需要注意：通过DOM操作修改组件的方式依赖于Streamlit的DOM结构，版本更新可能会改变组件的data-testid或DOM布局，导致代码失效，因此版本升级后需要重新测试调整。

内容的提问来源于stack exchange，提问作者Tiancheng Liu