React如何引用外部函数获取值并实现跨页面渲染

你当前的代码无法正常显示电影名，核心是3个问题：

• 点击a标签跳转到独立的bookticket.html属于全新的页面加载，原电影列表页内存里的filmTitle变量会被浏览器完全清空，新页面读取不到这个值
• 普通的全局变量修改后不会触发React的重渲染机制，就算在同一个页面修改变量，React组件也不会自动更新视图
• 你用数组存储电影名，每次点击都会往数组里追加新值，不符合单次订票只传递单个选中电影名的需求，且a标签默认跳转行为触发太快，数据还没处理完页面就已经卸载了

1. 修改电影列表页的点击跳转逻辑 #

删掉原来定义的全局filmTitle数组，重写getMovieName函数，通过URL查询参数传递选中的电影名：

function getMovieName(e) {
  // 阻止a标签默认的直接跳转行为
  e.preventDefault();
  // 获取当前点击项对应的电影名
  const currentListItem = e.target.closest("li");
  const movieName = currentListItem.querySelector("img").alt;
  // 把电影名编码后拼接到订票页URL上，再执行跳转
  const jumpUrl = `/html/bookticket.html?film=${encodeURIComponent(movieName)}`;
  window.location.href = jumpUrl;
}

列表部分的HTML代码不用改动，保持原有onClick绑定即可。

2. 修改订票页的React渲染逻辑 #

在bookticket.html页面中，重写AddTitle组件，初始化时直接从当前页面URL中解析出传递过来的电影名再渲染：

function AddTitle() {
  // 从URL参数中解析选中的电影名，没拿到值时给默认兜底文本
  const searchParams = new URLSearchParams(window.location.search);
  const selectedFilm = searchParams.get('film') || "unknown movie";

  return (
    <div className="schedule-heading">
      <h2>Step 1: Select screening for {selectedFilm}</h2>
    </div>
  )
}

ReactDOM.render(<AddTitle />, document.querySelector('.screenings'));

如果不想把电影名暴露在URL里，也可以用浏览器本地存储传值：

• 列表页点击时执行localStorage.setItem('selectedFilm', movieName)再跳转
• 订票页初始化时用localStorage.getItem('selectedFilm')取值即可
  这种方式的缺点是用户刷新订票页、或者清除浏览器缓存后会丢失选中的电影信息，优先推荐URL传参的方案。

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