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

Question

我有视图组件，它必须导入多个组件。这些组件将根据某些特定条件进行渲染。它应该如何工作是，我在页面上有3个按钮，例如，在我点击第一个按钮(文件上传)后，我需要渲染<代码>

警告：函数作为React子函数无效。如果您返回组件而不是从渲染中返回，可能会发生这种情况。或者您可能打算调用此函数而不是返回它。

这到底有什么问题？

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}

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

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

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>

    );
}

Answer 2

您需要调用函数：＜code＞｛this.renderImportAttribute（）｝