Question

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

我正在尝试创建一个'哑组件'，但是typescript不接受我的函数定义。

（TS）JSX元素类型'（）=＆gt; Element'不是构造函数对于JSX元素。 '（）=＆gt;类型中缺少属性'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组件？我的组件是否太“聪明”，无法使用“哑组件”语法制作？如果它有效的话我觉得这很优雅。

Answer 1

这不是智能与安全的问题。愚蠢的成分或反应。

你应该调用函数noResult＆amp; 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
}

Answer 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();

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

2 个答案: