我目前正在阅读 React 官方网站,在那里我遇到了这个问题。 React 官网声明我们可以在 JSX 中使用函数代码。因此,我尝试了以下代码,但它不起作用。
类 ABCD 扩展 React.Component {
render() {
return (
<div>
<p>
{() => <div>Hello World </div>}
</p>
</div>
);
}
}
我知道,我知道,你们中的一些人可能会说看看 React 网站上给出的示例。我看到了,官网给出的例子涉及到外部函数。我只是想知道我们可以独立使用JSX内部的函数吗?
请参阅此链接以获取额外信息:https://reactjs.org/docs/jsx-in-deep.html
因为我觉得你想做的事情是错误的。
JSX 无法解析对象或函数
如果你只是尝试
render() {
return (
<div>
<p>
{() => <div>Hello World </div>}
</p>
</div>
);
}
您正在尝试插入或返回function这是不可接受的表示节点。它应该是可以的东西由jsx解析。
对象或函数不能由 JSX 解析,它们应该由 Javascript 引擎解析。
您可以做的是定义您的方法并立即调用该方法,以便函数(iife 函数)返回可以由 JSX 解析的内容。
就像是
render() {
return (
<div>
<p>
{(() => {<div>Hello World </div>})()}
</p>
</div>
);
}
希望你明白这一点。返回可由 JSX 解析的内容。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)