Reactjs React-函数作为React子函数无效。如果返回的是组件而不是<；组件/>；从渲染

我有一个视图组件，它必须导入多个组件。这些组件将根据特定条件进行渲染。它的工作原理是，我在页面上有3个按钮，例如，在我单击第一个按钮（文件上载）后，我需要在下面呈现

组件。应该呈现的组件位于

renderImportAttributes

函数中。但这给了我一个警告

警告：函数作为子函数无效。如果返回组件而不是从渲染返回组件，则可能会发生这种情况。或者你是想调用这个函数而不是返回它

这到底是怎么回事

export default class ImportView extends React.PureComponent<ModelYearListProps, IState> {
    constructor(props) {
        super(props);
        this.state = {
            selectedImportOption: null
        }
    }

    private selectImportOption(option: string): any {
        this.setState(prevState => ({
            selectedImportOption: option,
        }));
    }

    private renderImportAttributes(): JSX.Element {
        if (this.state.selectedImportOption === FILE_IMPORT) {
            return <FileImport history={this.props.history} importerId={this.props.match.params.importerId} />;
        }
        else if (this.state.selectedImportOption === SPIDER_IMPORT) {
           //another component
        }
        else if (this.state.selectedImportOption === URL_IMPORT) {
           //another component
        }
        return null;
    }

    render() {
        return (
            <div className="overView">
                <Button onClick={() => this.selectImportOption(FILE_IMPORT)}>
                    File
                </Button>

                <Button onClick={() => this.selectImportOption(SPIDER_IMPORT)}>
                    Spider
                </Button>

                <Button onClick={() => this.selectImportOption(URL_IMPORT)}>
                    URL
                </Button>
                {this.renderImportAttributes}
            </div>

        );
    }
};

导出默认类ImportView扩展React.PureComponent{
建造师（道具）{
超级（道具）；
此.state={
选择导入选项：空
}
}
private selectImportOption（选项：字符串）：任意{
this.setState（prevState=>({
选择导入选项：选项，
}));
}
私有RenderImportAttribute（）：JSX.Element{
if（this.state.selectedImportOption==文件\u导入）{
返回；
}
else if（this.state.selectedImportOption==SPIDER\u导入）{
//另一部分
}
else if（this.state.selectedImportOption==URL\u导入）{
//另一部分
}
返回null；
}
render（）{
返回(
选择导入选项（文件导入）}>
文件
选择导入选项（蜘蛛导入）}>
蜘蛛
选择导入选项（URL\u导入）}>
统一资源定位地址
{this.renderImportAttribute}
);
}
};

您需要调用以下函数：

{this.renderImportAttribute（）}

这里您只是引用函数声明，没有调用函数

您可以在返回之前执行它，如：

render() {
    let elems = this.renderImportAttributes();

    return (
        <div className="overView">
            <Button onClick={() => this.selectImportOption(FILE_IMPORT)}>
                File
            </Button>

            <Button onClick={() => this.selectImportOption(SPIDER_IMPORT)}>
                Spider
            </Button>

            <Button onClick={() => this.selectImportOption(URL_IMPORT)}>
                URL
            </Button>
            {elems}
        </div>

    );
}

render（）{
让elems=this.renderImportAttribute（）；
返回(
选择导入选项（文件导入）}>
文件
选择导入选项（蜘蛛导入）}>
蜘蛛
选择导入选项（URL\u导入）}>
统一资源定位地址
{elems}
);
}

啊，我发现我在Rendery中的函数调用中遗漏了括号。啊，我刚刚找到了，我完全遗漏了。感谢并接受

render() {
    let elems = this.renderImportAttributes();

    return (
        <div className="overView">
            <Button onClick={() => this.selectImportOption(FILE_IMPORT)}>
                File
            </Button>

            <Button onClick={() => this.selectImportOption(SPIDER_IMPORT)}>
                Spider
            </Button>

            <Button onClick={() => this.selectImportOption(URL_IMPORT)}>
                URL
            </Button>
            {elems}
        </div>

    );
}