reactjs - React - 函数作为 React 子节点无效。如果您从渲染中返回 Component 而不是 ，则可能会发生这种情况

Question

我有 View 组件，必须导入多个组件。这些组件将根据某些特定条件进行渲染。它应该如何工作是我在页面上有 3 个按钮，例如在我点击第一个按钮(文件上传)后，我需要渲染 <FileImport>下面的组件。应该渲染什么组件在renderImportAttributes功能。但它向我发出警告

警告:函数作为 React 子节点无效。如果您返回 Component 而不是从 render 返回，则可能会发生这种情况。或者，您可能打算调用此函数而不是返回它。

这究竟有什么问题？

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>

        );
    }
};

Answer 1

您需要调用该函数:{this.renderImportAttributes()}