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

【问题标题】：Typescript calling a function by reference inside of react jsxTypescript 在 React jsx 中通过引用调用函数
【发布时间】：2022-12-21 10:21:58
【问题描述】：

我正在使用 Typescript 和 React JS。

假设我有一个 React 功能组件：

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>
     );
}

用括号调用函数在 Typescript 中有效：

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

在 JavaScript 中，我会这样做 {myArrowFunction} 以通过引用调用它的函数并且它有效。在 TypeScript 中，当我这样做时，我没有在屏幕上看到可见的“某些段落”

在 Typescript 中通过引用调用函数的最佳方式是什么？

谢谢。

【问题讨论】：

“通过引用调用函数”是什么意思？第一个例子应该给出一个错误，就像我想象的“对象作为反应孩子无效”（编辑：只是用反应的 umd 版本做了一个快速测试，它不会在 js 中给出错误但它不会' t 输出任何东西到屏幕）
TypeScript 不会改变函数的基本行为。在运行时，它不存在根本.
第二种方法有效，因为它是正确的方法。即使在普通的 JS 中
您将该函数视为隐含调用该函数的 eventListener。您必须显式调用该函数。

标签： javascript reactjs typescript react-native react-typescript

【解决方案1】：

即使在js，你所做的也是错误的

我知道你想做什么，你可以这样称呼它，但不建议在组件内创建组件

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>
     );
}

【讨论】：