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

【问题标题】：React - Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from renderReact - 函数作为 React 子级无效。如果您从渲染返回 Component 而不是 <Component />，则可能会发生这种情况
【发布时间】：2018-12-26 01:38:12
【问题描述】：

我有视图组件，它必须导入多个组件。这些组件将根据某些特定条件进行渲染。它的工作原理是我在页面上有 3 个按钮，例如，在我单击第一个按钮（文件上传）后，我需要在下方呈现 <FileImport> 组件。应该渲染的组件在renderImportAttributes 函数中。但它给我一个警告

警告：函数作为 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>

        );
    }
};

【问题讨论】：

啊，我发现我错过了渲染函数调用中的括号

标签： reactjs

【解决方案1】：

你需要调用函数： {this.renderImportAttributes()}

【讨论】：

是的，刚刚找到，我完全错过了。感谢并接受

【解决方案2】：

 {this.renderImportAttributes}

这里你只是引用函数声明，你还没有调用函数。

可以在return之前执行，比如：

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>

    );
}

【讨论】：