如何在JSX中使用函数

我目前正在阅读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

回答:

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

如果你只是尝试

render() {

return (

<div>

<p>

{() => <div>Hello World </div>}

</p>

</div>

);

}

您正在尝试插值或返回作为表示节点不可接受的 。它应该是 可以

。JSX无法解析对象或函数,因此应由Javascript引擎对其进行解析。

您可以做的是定义您的方法并立即调用该方法,以便函数(iife函数)返回可以由JSX解析的内容。

就像是

render() {

return (

<div>

<p>

{(() => {<div>Hello World </div>})()}

</p>

</div>

);

}

希望你明白这一点。返回可以由JSX解析的内容。

以上是 如何在JSX中使用函数 的全部内容, 来源链接: utcz.com/qa/434361.html

回到顶部