如何在导入的Vanilla JS文件中访问React组件内的bookings变量

方法1：将bookings作为参数传递给外部JS函数 #

这是最规范的做法，避免全局作用域污染：

• 在script.js中定义并导出一个接收bookings的函数：

// script.js
export function processBookings(bookings) {
  // 在这里编写处理bookings的逻辑
  console.log('外部JS获取到的bookings:', bookings);
}

• 在React组件中导入该函数，监听bookings的变化并传递过去：

import { processBookings } from "./script.js";

const Booking = () => {
  let [bookings, setBookings] = useState([]);

  useEffect(() => {
    getBookings();
  }, []);

  // 当bookings更新时，调用外部函数
  useEffect(() => {
    if (bookings.length > 0) {
      processBookings(bookings);
    }
  }, [bookings]);

  let getBookings = async () => {
    let response = await fetch("http://127.0.0.1:8000/all/bookings/");
    let data = await response.json();
    setBookings(data);
  };
  // ...组件其他逻辑
};

方法2：使用全局变量（应急方案，不推荐） #

通过将bookings挂载到window对象实现全局访问，会污染全局作用域，仅适合临时调试或特殊场景：

• 在React组件中，将bookings挂载到全局：

const Booking = () => {
  let [bookings, setBookings] = useState([]);

  useEffect(() => {
    getBookings();
  }, []);

  useEffect(() => {
    // 把bookings挂载到window对象
    window.bookings = bookings;
  }, [bookings]);

  let getBookings = async () => {
    let response = await fetch("http://127.0.0.1:8000/all/bookings/");
    let data = await response.json();
    setBookings(data);
  };
  // ...组件其他逻辑
};

• 在script.js中直接访问全局变量（需确保bookings已被赋值）：

// script.js
// 可通过定时器或事件监听确保数据已加载
setTimeout(() => {
  console.log('全局变量拿到的bookings:', window.bookings);
}, 1000);

方法3：将数据请求逻辑移到外部JS文件 #

把获取bookings的逻辑封装到script.js中，让外部JS自主获取数据，同时可以给React组件返回结果：

• 在script.js中封装请求函数并导出：

// script.js
export async function getBookings() {
  let response = await fetch("http://127.0.0.1:8000/all/bookings/");
  let data = await response.json();
  // 在这里直接处理数据
  console.log('外部JS获取到的bookings:', data);
  return data;
}

• 在React组件中导入并调用该函数：

import { getBookings } from "./script.js";

const Booking = () => {
  let [bookings, setBookings] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const data = await getBookings();
      setBookings(data);
    };
    fetchData();
  }, []);

  // ...组件其他逻辑
};

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