Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How to make a function public in react functional component?

how to add function to react functional component object so that we can call component.function()

const ReactComp = () => {
    const func = () => {return}
    return (<div></div>)
}

let comp = document.querySelector("react-comp")
comp.func() // need function call in this way`
Tags:

3

Answers


  1. 0

    You can achieve this by using the :

    useRef hook

    here is code sample to achieve your requirement

    import React, { useRef } from 'react';

const MyComponent = () => {
 // Create a ref to hold the function

const myFunctionRef = useRef();

 // Define your function


const myFunction = () => {
console.log('My function is called');
// Add your functionality here
 };

  // Assign the function to the ref
  myFunctionRef.current = myFunction;

 // You can call this function using component.function()
const callFunction = () => {
myFunctionRef.current();
};

 return (
<div>
  <button onClick={callFunction}>Call Function</button>
</div>
);
};

  export default MyComponent;
    Login or Signup to reply.
  2. 0 
        const ReactComp = () => {
  // Define the function directly inside the component
  const handleClick = () => {
    console.log("Button clicked!");
  };

  return (
    <div>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
};

// Render the component
ReactDOM.render(<ReactComp />, document.getElementById("react-comp"));
    • We define the function handleClick directly inside the functional
      component.
    • We return JSX containing a button element.
    • We bind the handleClick function to the onClick event handler of the
      button.
    • When the button is clicked, handleClick is executed, logging "Button
      clicked!" to the console.
    Login or Signup to reply.
  3. 0

    Dom elements can only have strings attached to. So in the follwing case

    const ReactComp = () => {
    const func = () => {return}
    return (<div foo={func}></div>)
}

let el = document.getElementById("foo")
el.getAttribute("foo") // will be function ...() { [native code] }

    If you are trying to use the event handlers you can do something like e.g. testing

    const ReactComp = () => {
    const func = () => {return}
    return (<div id="foo" onClick={func}></div>)
}

let el = document.getElementById("foo")
el.click() // calls onClick & thus the function

    The following is not recommended at all

    const ReactComp = () => {
    const func = () => {return}
    React.useEffect(()=>{ 
window._ReactCompFunc = func;
}, [])
    return (<div id="foo" onClick={func}></div>)
}

window._ReactCompFunc() // will call the function
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search