反应错误“您可能忘记从定义它的文件中导出组件，或者您可能混淆了默认和命名导入”

Question

https://codesandbox.io/s/sparkling-paper-mxb9g?file=/src/index.tsx

我所有的进出口都很好。

元素类型无效：应为字符串（用于内置组件） 或类/函数（用于复合组件）但得到：未定义。你 可能忘记从定义它的文件中导出您的组件， 或者您可能混淆了默认导入和命名导入。

检查Search的渲染方法。

Search.tsx 渲染函数

    render = () => {
        return (
            <div className="wrapper">
                <div className='content'>
                    <SearchBox placeholder="Search" underlined={true} onChange={this.setQuery} onSearch={this.searchQuery}/>
                    <this.RenderDomains />
                    <this.RenderImages />
                </div>
            </div>
        )
    }

这个错误与这段代码有什么关系？

Answer 1

您收到错误的原因是您尝试在 Search 组件的 render 方法中渲染域和图像。

用户定义的组件must start with an uppercase letter。所以打电话<this.RenderDomains /> 是不允许的。您有几个选项可以解决此问题。

1. 而不是尝试使用像<this.RenderDomains /> 这样的jsx 来渲染方法的结果，您应该调用该方法并将返回的值存储在一个变量中，然后渲染该变量或直接返回该方法的结果。下面的示例显示了这两个示例。

render = () => {
        const domains = this.RenderDomains();
        const images = this.RenderImages();
        return (
            <div className="wrapper">
                <div className='content'>
                    <SearchBox placeholder="Search" underlined={true} onChange={this.setQuery} onSearch={this.searchQuery}/>
                    {domains}
                    {this.renderImages()}
                </div>
            </div>
        )
    }

1. 将方法（不是结果）分配给以大写字符开头的变量，然后像普通组件一样调用它。

render = () => {
        const RenderDomains = this.RenderDomains;
        const RenderImages = this.RenderImages;
        return (
            <div className="wrapper">
                <div className='content'>
                    <SearchBox placeholder="Search" underlined={true} onChange={this.setQuery} onSearch={this.searchQuery}/>
                    {<RenderDomains />}
                    {<RenderImages />}
                </div>
            </div>
        )
    }

1. 不使用类的方法，而是将 RenderDomains 和 RenderImages 设为它们自己的组件。