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