Блог

У меня есть компонент реакции Button , в котором у меня есть два состояния name и players . Я хочу импортировать эти состояния в другой файл JS. Этот файл является файлом javascript vanilla, а не компонентом.

Вот коды:

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)
 

Я попытался импортировать переменные как обычные переменные, но здесь это не работает. Пожалуйста, предложите подходящий способ сделать это.

Официального подхода к решению этой проблемы не существует. Но я предлагаю использовать браузерные хранилища, localStorage чтобы справиться с этим.

Так:

1) Сохраните состояния на localStorage основе их изменений с помощью useEffect()

 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"))