Typescript 在 React jsx 中通过引用调用函数

Question

I am using Typescript with React JS.

let's say if I have a React functional component:

function MyFunction(){
      const myArrowFunction = () =>{
          return(
             <div>
                <p>Some Paragraph</p>
             </div>
          );
      };

     //In JavaScript, I would do this to call it the function by reference and it works.
     //In TypeScript, when I do the same, I do not see the "Some Paragraph" visible on the screen
     return(
         <main>
           {myArrowFunction}
         </main>
     );
}

calling the function with parenthesis works in Typescript:

return(
    <main>
     {myArrowFunction()}
    </main>
);

In JavaScript, I would do this {myArrowFunction} to call it the function by reference and it works. In TypeScript, when I do the same, I do not see the "Some Paragraph" visible on the screen

What is the best way to call a function by reference in Typescript?

Thanks.

Answer 1

What you are doing is wrong even in js

I know what you want to do and you could call this as below, but it is not recommended to create a component inside a component

function MyFunction(){
      const myArrowFunction = () =>{
          return(
             <div>
                <p>Some Paragraph</p>
             </div>
          );
      };
      
     // this is manly to stop typescript from complaining 
     const Fn = myArrowFunction as any;
     return(
         <main>
           <Fn />
         </main>
     );
}