如何在JSX中使用函数

小编典典

reactjs

我目前正在阅读React官方网站，在那里遇到了这个问题。React官方网站指出，我们可以在JSX中使用功能代码。因此，我尝试了以下代码，但无法正常工作。

ABCD类扩展了React.Component {

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

}

我知道，我知道，有些人可能会说，请参阅React网站上给出的示例。我看到了，官方网站上的示例涉及外部功能。我只想知道我们可以独立使用JSX内部的功能。

请参阅此链接以获取更多信息：https :
//reactjs.org/docs/jsx-in-depth.html

阅读 1577

2020-07-22

共1个答案

小编典典

我觉得您要尝试做的是错误的。

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解析的内容。

2020-07-22