Question 49350 in Javascript Question posted in
A very good W3school tutorial can be found here.

What is equivalent to this in function component? – Javascript

I am using function component ,and now I want to pass itself to another objects.

import GlobalParam from './GlobalParam'
const TopPage = (props) =>{
  const [load, setLoad] = useState(false);
  useEffect(() =>{
    GlobalParam.topPage = this;// however it does not work in function component.

  })
}

in GlobalParam

export default class GlobalParam {
   static topPage;
}

If I can pass conponent function itself to static class,

I can load the topPage from anywhere GlobalParam.topPage.setLoad(true);

What should I use in function component instead of this?

Tags:

2

Answers


  1. 0

    In function components, you should use useRef instead of this to refer to the component instance. Here’s how you can modify your code to use useRef:

    import { useRef, useEffect } from 'react';
import GlobalParam from './GlobalParam';

const TopPage = (props) => {
  const [load, setLoad] = useState(false);
  const topPageRef = useRef(null);

  useEffect(() => {
    GlobalParam.topPage = topPageRef.current;
  }, []);

  return (
    <div ref={topPageRef}>
      {/* Your component code here */}
    </div>
  );
};

    In this code, we are using the useRef hook to create a reference to the component instance. We then pass this reference to the ref attribute of the div element that wraps the component’s code.

    In the useEffect hook, we set the topPage property of the GlobalParam class to the current value of the topPageRef reference. Note that we pass an empty dependency array [] to useEffect to ensure that the effect only runs once when the component mounts.

    Now, you can access the load state of the TopPage component from anywhere using GlobalParam.topPage.load

    Login or Signup to reply.
  2. 0

    Take a look at useContext.

    You can define a context with createContext (you can specify defaultValue but it’s out of the scope of this example)

    import { createContext } from "react";

const LoadContext = createContext();

export default LoadContext;

    Then you can wrap your app with a Provider that will make available variables and functions to all its children

    import TopPage from './TopPage';
import Debug from './DebugButton';
import { createContext, useState } from 'react';
import LoadContext from './LoadContext';


function App() {

  const [load, setLoad] = useState(false)

  return (
    <LoadContext.Provider value={{load, setLoad}}>
      <TopPage />
      <Debug />
    </LoadContext.Provider>
  );
}

export default App;

    and then you can access the context with useContext hook!

    import {useContext} from 'react';
import LoadContext from './LoadContext';

const TopPage = (props) => {
  
  const {load} = useContext(LoadContext)

  return (
    <div>
      {load? <h1>loading</h1>: <h1>not loading</h1>}
    </div>
  );
};

export default TopPage;

    and another component I made just for testing purpose

    import { useContext } from "react"
import LoadContext from "./LoadContext"

const DebugButton = () => {
  const {setLoad} = useContext(LoadContext)

  return <button onClick={()=>{setLoad(v=>!v)}}>Debug</button>
}

export default DebugButton
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search