React Dumb 组件 Typescript 错误：元素不是 JSX 元素的构造函数，缺少属性“render”答案

【问题标题】：React Dumb component Typescript error: Element is not a constructor function for JSX elements, property 'render' is missingReact Dumb 组件 Typescript 错误：元素不是 JSX 元素的构造函数，缺少属性“render”
【发布时间】：2018-06-01 17:03:54
【问题描述】：

"Dependencies":{
"typescript": "2.6.2"
"@types/react": "15.0.35",
"react": "15.6.1",
}

我正在尝试制作一个“哑组件”，但 typescript 不接受我的函数定义。

(TS) JSX 元素类型 '() => Element' 不是构造函数对于 JSX 元素。类型'() => 中缺少属性'render' 元素'。

代码不接受。

const Layout = (props: Invoice) => {
        const noResult = () => <p><em>Nothing found.</em></p>;

        const showResult = () => {
            return (
                <div className="col-sm-10" >
                    <div id="screenshotPlaceholder">
                        <div className="invoice-container">

                            <Header {...props} />

                            <div className="invoice-content">
                                <Content {...props } />
                            </div>

                        </div>
                    </div>
                </div>)
        };

        if (props === null)
            return noResult;
        return showResult;   
    }

如果我将最后两个返回值更改为如下图所示，那么它会起作用，但它不太干净。

if (props === null)
    return <div>{noResult}</div>;
return <div>{showResult}</div>;

它似乎需要一个带有 JSX 内联的 return 语句才能被识别为 JSX 组件？我的组件是否太“智能”而无法使用“哑组件”语法制作？我认为如果它起作用了，这将相当优雅。

【问题讨论】：

标签： reactjs typescript

【解决方案1】：

这不是智能和愚蠢组件或反应的问题。

你应该调用函数noResult & showResult，例如noResult是一个函数定义。 noResult() 将调用实际函数并返回 <p><em>Nothing found.</em></p>

const Layout = (props: Invoice) => {
    const noResult = () => <p><em>Nothing found.</em></p>;

    const showResult = () => {
        return (
            <div className="col-sm-10" >
                <div id="screenshotPlaceholder">
                    <div className="invoice-container">

                        <Header {...props} />

                        <div className="invoice-content">
                            <Content {...props } />
                        </div>

                    </div>
                </div>
            </div>)
    };

    if (props === null)
        return noResult(); // ****** Note here
    return showResult();  // ****** And here
}

【讨论】：

使用函数有效！谢谢，我会接受这个作为答案。

【解决方案2】：

你不需要额外的函数包装：

const Layout = (props: Invoice) => {
  const noResult = (
    <p>
      <em>Nothing found.</em>
    </p>
  );

  const showResult = (
    <div className="col-sm-10">
      <div id="screenshotPlaceholder">
        <div className="invoice-container">
          <Header {...props} />

          <div className="invoice-content">
            <Content {...props} />
          </div>
        </div>
      </div>
    </div>
  );

  if (props === null)
    return noResult;
  return showResult;
};

或者您可以不理会定义，而是调用函数：

  const noResult = () => <p><em>Nothing found.</em></p>;
  const showResult = () => {
  // ...
  };

  if (props === null)
    return noResult();
  return showResult();

【讨论】：