如何在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