React 不渲染函数称为 HTML

Question

作为我的 React 应用程序的一部分，箭头函数 ContainerCookiesPolicy 调用箭头函数 LogInTitleTest（以及其他一些函数）。

export default class MyClass extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    ContainerCookiesPolicy = () => {
        if (window.localStorage.getItem('CookiesAgreed') !== 'true') {
            return (
                <div className='ContainerCookiesPolicy'>
                    <this.LogInTitleTest/>
                    {/*Some other functions*/}
                </div>
            )
        } else {
            return null;
        }
    }

    LogInTitleTest = () => {
        return  (
            <span className='Log_in_title_text'>{'Text'}</span>
        );
    }

render() {
         <this.ContainerCookiesPolicy/>
         {/*Some other functions*/}
    }
}

如果我执行这段代码，即函数 ContainerCookiesPolicy 调用函数 LogInTitleTest，React 将不会渲染任何东西（就像你的 function/object returns null) 并给出错误 Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.。但是，如果相反，我将 LogInTitleTest 的内容复制并粘贴到 ContainerCookiesPolicy 中，如下所示：

ContainerCookiesPolicy = () => {
        if (window.localStorage.getItem('CookiesAgreed') !== 'true') {
            return (
                <div className='ContainerCookiesPolicy'>
                    <span className='Log_in_title_text'>{'Text'}</span>
                    {/*Some other functions*/}
                </div>
            )
        } else {
            return null;
        }
    }

它实际上会呈现整个页面，上面有单词 Text。

进一步考虑：

如果我的函数 LogInTitleTest 包含 <div>，它也不会呈现页面；如果 <div> 包含在函数 ContainerCookiesPolicy 中，它将呈现。同样的事情，如果不是 {'Text'} 我只是 Text.

    LogInTitleTest = () => {
        return  (
            <div className="Log_in_title_container">
                <span className='Log_in_title_text'>{'Text'}</span>
            </div>
        );
    }

如果我将函数 LogInTitleTest 更改为 return null，情况将保持完全相同：

    LogInTitleTest = () => {
        return  null;
    }

我正在使用 AWS Amplify 呈现页面。在本地主机上的 WebStorm 上，我没有观察到这种奇怪的行为。
我在另一部分代码上测试了原始函数 LogInTitleTest，它按预期工作。因此问题一定出在 ContainerCookiesPolicy.

知道为什么会这样吗？任何帮助将不胜感激！

提前致谢

Answer 1

您不应将组件引用为 <this.LogInTitleTest />。应该是 <LogInTitleTest />.

如果它们在单个文件中，还要注意定义功能组件的顺序。如 this question 中所述，箭头函数是自上而下求值的。

    const LogInTitleTest = () => {
        return  (
            <span className='Log_in_title_text'>{'Text'}</span>
        );
    }

    const ContainerCookiesPolicy = () => {
        if (window.localStorage.getItem('CookiesAgreed') !== 'true') {
            return (
                <div className='ContainerCookiesPolicy'>
                    <LogInTitleTest />
                    {/*Some other functions*/}
                </div>
            )
        } else {
            return null;
        }
    }

编辑： 根据更新的问题更新

现在您已经更新了示例，很明显您正在使用 class 组件。要在 class 组件中呈现 JSX 块，您通常将函数称为函数而不是组件。

另请注意，您示例中的渲染函数当前未返回任何内容。

export default class MyClass extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    renderContainerCookiesPolicy = () => {
        if (window.localStorage.getItem('CookiesAgreed') !== 'true') {
            return (
                <div className='ContainerCookiesPolicy'>
                    {this.renderLogInTitleTest()}
                    {/*Some other functions*/}
                </div>
            )
        } else {
            return null;
        }
    }

    renderLogInTitleTest = () => {
        return  (
            <span className='Log_in_title_text'>Text</span>
        );
    }

    render() {
        return (
           {this.renderContainerCookiesPolicy()}
           {/*Some other functions*/}
        )
    }
}

React 不渲染函数称为 HTML

React not rendering function called as HTML

javascript

reactjs

aws-amplify