将变量从 React 组件导入到 Javascript 文件

Question

我有一个 React 组件 Button，其中我有两个状态 name 和 players。我想将这些状态导入到另一个 JS 文件中。此文件是原始 javascript 文件而不是组件。

代码如下：

Button.js

import {useState} from "react"

import {buttonContent} from '../buttonContent'
import {correctAnswer} from "../pageTraversal"
import {verifyResults} from "../verifyResults"

const Button = ({textInput, updateApp, updatePage, updateError}) => {
  const [pageTitle, updateButton] = useState("home-page")
  const [textVisible, textVisibility] = useState("")
  const [disabled, changeClick] = useState(false)
  const [cursor, changeCursor] = useState("pointer")
  const [name, updateName] = useState('')
  const [players, updateFriends] = useState('')

  const startPages = ["home-page", "welcome", "scenario", "the-adventure-begins"]

  const navigatePage = () => {
    if (startPages.includes(pageTitle)){
      changeCorrectPage()
      return
    }

    if(textInput===""){
      updateError("")
      return
    }
    else{
      updateError("remove")
    }

    const response = verifyResults(pageTitle, textInput)
    if (pageTitle === "instructions"){
      updateName(response["player"])
      updateFriends(response["friends"])
      changeCorrectPage()
    }

    if(response === "correct"){
      changeCorrectPage()
    }
  }

  const changeCorrectPage = () => {
    const page = correctAnswer[pageTitle]
    updateApp(page)
    updatePage(page)
    changeButton(page)
  }

  const changeButton = (page) => {
    textVisibility("hide")
    changeClick(true)
    changeCursor("auto")
    setTimeout(() => {
      updateButton(page)
    }, 2500)
    setTimeout(() => {
      textVisibility("show")
    }, 4500)
    setTimeout(() => {
      changeClick(false)
      changeCursor("pointer")
    }, 6500)
  }

  return (
    <div>
      <button className={`button mx-auto`}
        id={(pageTitle==="home-page" ? "home-button" : "")}
        style={{
          "cursor": {cursor},
        }}
        disabled={disabled}
        onClick={navigatePage}
      >
        <h1 className={`button-text ${textVisible}`}>
          {buttonContent[pageTitle]}
        </h1>
      </button>
      <Players name={name} friends={friends} />
    </div>
  )
}

export default Button

我想将 name 和 players 这两个状态导入到下面的另一个 javascript 文件中，我想将它们用作普通变量。

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

我试过将变量导入为普通变量，但这在这里不起作用。请建议一种合适的方法。

Answer 1

这个 link 的问题没有官方的解决方法。但我建议使用像 localStorage 这样的浏览器存储来处理这个问题。

所以：

1) 根据 useEffect()

的变化保存 localStorage 上的状态

useEffect(()=>{
    localStorage.setItem("name", name);
    localStorage.setItem("players", players);
},[name,players])

2) localStorage随处获取状态数据

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

将变量从 React 组件导入到 Javascript 文件

Import Variable from React Component to Javascript File

javascript

components

reactjs