如何在 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>
    );
}

您正在尝试插入或返回一个不能作为表示节点的函数。 它应该是可以被jsx 解析的东西。 一个对象或一个函数不能被 JSX 解析，它们应该被 Javascript 引擎解析。

你可以做的是定义你的方法并立即调用它，这样函数（iife 函数）就会返回一些可以被 JSX 解析的东西。

类似的东西

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

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

Answer 2

只需调用一个返回 JSX 的函数。 例如：

class FooComp extends React.Component {
    someFunction() {
        return (<div>Hello World!</div>);
    }

    render() {
        return (
            <div>
                    <p>
                        {this.someFunction()}
                    </p>
            </div>
        );
    }
}

Answer 3

您可以尝试将其称为立即调用的函数

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

Answer 4

除了其他答案中提到的立即调用函数外， 文档还提到可以将函数用作props.children(...args) ，可以作为props.children(...args)调用。

关键是组件最终必须返回一些可渲染的东西：

传递给自定义组件的子组件可以是任何东西，只要该组件在渲染之前将它们转换为 React 可以理解的东西。 这种用法并不常见，但如果您想扩展 JSX 的功能，它就可以使用。

Answer 5

尽管从您的问题中不清楚您是想在 jsx 中定义一个函数还是想从 jsx 调用函数。 如果你想在 jsx 中定义你的函数，那么你应该使用：

class ABCD extends React.Component {
   render() {
      return (
         <div>
             <p>
                 {(() => {<div>Hello World </div>})()}
             </p>
         </div>
      );
   }
}

如果你想从你的 jsx 调用一个函数，那么你应该使用：

class ABCD extends React.Component {
   show() {
        return (<div>Hello World!</div>);
   }
   render() {
        return (
            <div>
                    <p>
                        {this.show()}
                    </p>
            </div>
        );
    }
}