如何将React组件Button内的name、players状态导入普通JS文件使用

核心原因说明 #

React组件内部的state是和组件实例绑定的局部作用域变量，不属于模块的静态导出内容，所以普通的模块导入方式无法拿到这两个动态变化的状态。

方案1：使用共享模块实现状态同步（推荐） #

步骤1：创建共享状态存储文件 #

新建src/utils/sharedStates.js，根据需求选择对应版本：

基础版（仅支持获取最新值）

export let name = ''
export let players = ''

export const updateSharedStates = (newName, newPlayers) => {
  name = newName
  players = newPlayers
}

增强版（支持状态变化监听）

let name = ''
let players = ''
const listeners = []

const notifyListeners = () => listeners.forEach(cb => cb(name, players))

export const updateSharedStates = (newName, newPlayers) => {
  name = newName
  players = newPlayers
  notifyListeners()
}

// 直接获取当前最新值
export const getStates = () => ({ name, players })
// 订阅状态变化通知
export const subscribeStateChange = (cb) => {
  listeners.push(cb)
  cb(name, players)
}

步骤2：在Button组件中同步状态到共享模块 #

修改Button.js：

1. 导入依赖

import { useState, useEffect } from "react"
import { updateSharedStates } from '../utils/sharedStates'

2. 组件内部添加同步逻辑

// 放在其他hooks之后即可
useEffect(() => {
  updateSharedStates(name, players)
}, [name, players])

注：你当前代码的return部分存在笔误：<Players name={name} friends={friends} />里的friends没有定义，你的状态名是players，此处需要改成friends={players}。

步骤3：在目标JS文件中使用共享状态 #

使用基础版共享模块

import { name, players } from '../utils/sharedStates'

const width = window.innerWidth;
const height = window.innerHeight;
let textSize = ''
if(height > width){
  textSize = "small"
}
console.log(name)
console.log(players)

使用增强版共享模块（支持实时监听变化）

import { getStates, subscribeStateChange } from '../utils/sharedStates'

const width = window.innerWidth;
const height = window.innerHeight;
let textSize = ''
if(height > width){
  textSize = "small"
}

// 仅获取当前最新值
const { name, players } = getStates()
console.log(name, players)

// 监听状态变化，每次更新自动执行逻辑
subscribeStateChange((name, players) => {
  console.log('状态更新：', name, players)
  // 此处可添加你需要执行的其他逻辑
})

方案2：挂载到全局window对象（简单但不推荐） #

如果是小型项目、不想额外创建文件，可以直接把状态挂载到全局window对象，缺点是容易造成全局变量污染、变量被意外覆盖。

1. 修改Button.js，添加同步逻辑

import { useEffect } from 'react'

// 组件内部添加
useEffect(() => {
  window.sharedName = name
  window.sharedPlayers = players
}, [name, players])

2. 目标JS文件直接读取全局变量

const width = window.innerWidth;
const height = window.innerHeight;
let textSize = ''
if(height > width){
  textSize = "small"
}
console.log(window.sharedName)
console.log(window.sharedPlayers)

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