React中如何为Iframe的URL动态添加localStorage中的查询参数？

在React中动态生成带查询参数的iframe地址，核心是在组件内获取localStorage的值，再拼接/构建合法的URL。以下是两种常见组件类型的实现方式：

函数组件实现 #

import { useState, useEffect } from 'react';

function YourComponent() {
  const [firstName, setFirstName] = useState('');

  // 组件挂载时读取localStorage
  useEffect(() => {
    if (typeof window !== 'undefined') {
      const isLoggedIn = localStorage.getItem('isLoggedIn') === 'true';
      if (isLoggedIn) {
        const storedName = localStorage.getItem('firstName');
        storedName && setFirstName(storedName);
      }
    }
  }, []);

  // 构建动态URL（用URLSearchParams处理参数更规范）
  const buildIframeSrc = () => {
    const baseUrl = new URL('https://go.offer.domain.com/l/1021843/2023-09-14/abcd');
    if (firstName) {
      baseUrl.searchParams.set('first_name', firstName);
    }
    return baseUrl.toString();
  };

  return <IframeWrapper src={buildIframeSrc()} />;
}

类组件实现 #

class YourComponent extends React.Component {
  state = { firstName: '' };

  componentDidMount() {
    if (typeof window !== 'undefined') {
      const isLoggedIn = localStorage.getItem('isLoggedIn') === 'true';
      if (isLoggedIn) {
        const storedName = localStorage.getItem('firstName');
        storedName && this.setState({ firstName: storedName });
      }
    }
  }

  buildIframeSrc() {
    const baseUrl = new URL('https://go.offer.domain.com/l/1021843/2023-09-14/abcd');
    if (this.state.firstName) {
      baseUrl.searchParams.set('first_name', this.state.firstName);
    }
    return baseUrl.toString();
  }

  render() {
    return <IframeWrapper src={this.buildIframeSrc()} />;
  }
}

关键说明 #

1. 浏览器环境判断：typeof window !== 'undefined' 是为了避免服务端渲染（SSR）时访问localStorage报错。
2. 参数编码：使用URLSearchParams自动处理参数的URL编码，避免特殊字符导致的地址失效问题。
3. 状态管理：用组件状态存储localStorage的值，确保组件能响应localStorage的变化（如果后续有修改需求）。

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