如何在JSX中使用函数

Question

我目前正在阅读React官方网站，在那里我遇到了这个问题。React官方网站声明我们可以在JSX中使用函数代码。因此，我尝试了以下代码，但不起作用。

ABCD类扩展了React。组件{

render() {
    return (
        <div>
            <p>
                {() => <div>Hello World </div>}
            </p>
        </div>
    );
}

}

我知道，我知道，你们中的一些人可能会说，看看React网站上给出的例子。我看到了，官网上的例子涉及到外部功能。我只是想知道我们能否独立使用JSX内部的函数。

有关更多信息，请参阅此链接：https://reactjs.org/docs/jsx-in-depth.html

Answer 1

您可以尝试将其作为中间调用的函数调用

render() {
    return (
        <div>
            <p>
                {(() => <div>Hello World </div>)()}
            </p>
        </div>
    );
}

Answer 2

只需调用一个返回JSX的函数。例如：

class FooComp extends React.Component {
    someFunction() {
        return (<div>Hello World!</div>);
    }

    render() {
        return (
            <div>
                    <p>
                        {this.someFunction()}
                    </p>
            </div>
        );
    }
}

Answer 3

因为我觉得你想做的是错误的。

对象或函数不可由JSX解析

如果你只是尝试

render() {
    return (
        <div>
            <p>
                {() => <div>Hello World </div>}
            </p>
        </div>
    );
}

您正在尝试插值或返回一个不可接受为表示节点的函数。它应该是jsx可以解析的东西。对象或函数不能由JSX解析，它们应该由Javascript引擎解析。

您可以做的是定义您的方法并立即调用它，以便函数（iife函数）返回可以由JSX解析的内容。

差不多

render() {
    return (
        <div>
            <p>
                {(() => {<div>Hello World </div>})()}
            </p>
        </div>
    );
}

希望你明白我的意思。返回JSX可以解析的东西。