reactjs - 如何在 JSX 中使用函数

Question

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

Answer 1

因为我觉得你试图做的事情是错误的。

JSX 无法解析对象或函数

如果你只是尝试

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

您正在尝试插入或返回 功能这是 Not Acceptable 表示节点。它应该是 由 jsx 解析 .
一个对象或一个函数不能被 JSX 解析，它们应该被 Javascript 引擎解析。

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

就像是

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

希望你明白这一点。返回一些可以被 JSX 解析的东西。