如何在ReactJS中向Iframe添加头部参数

import React, { useState } from 'react';

const IframeComponent = () => {
  const [iframeUrl, setIframeUrl] = useState('');
  const [headerParams, setHeaderParams] = useState('');

  // 处理URL和头部参数的变化
  const handleUrlChange = (e) => {
    setIframeUrl(e.target.value);
  };

  const handleHeaderParamsChange = (e) => {
    setHeaderParams(e.target.value);
  };

  return (
    <div>
      <input type="text" value={iframeUrl} onChange={handleUrlChange} placeholder="请输入iframe的URL" />
      <input type="text" value={headerParams} onChange={handleHeaderParamsChange} placeholder="请输入头部参数" />
      <iframe src={iframeUrl} headers={headerParams} />
    </div>
  );
};

export default IframeComponent;