JSX 中立即调用的函数表达式

IT技术 javascript reactjs
2021-05-16 13:28:05

我正在尝试编译 React 项目，但找不到为什么会出现此语法错误。具体来说，“{()=>{}()}”模式在这种情况下是做什么的？

Module build failed: SyntaxError: Unexpected token, expected } (35:9)

33 |             return (<div className="loading" />);
34 |           } 
35 |         }()}
   |          ^
36 |       </div>
37 |     );
38 |   }

@ ./src/containers/SearchApp.js 7:0-52
@ ./src/containers/App.js
@ ./src/index.js
@ multi ./src/index

代码部分：

render() {
return (
  <div>
    <div className="form-group">
      <input onKeyDown={this.searchEnter.bind(this)} type="text" ref="tag" className="form-control input-lg search-bar" placeholder="Enter the tag..." />
      <button onClick={this.searchClick.bind(this)} type="button" className="btn btn-default search-button">Search!</button>
    </div>
    {()=>{
      if (this.props.status === 'PENDING') {
        return (<div className="loading" />);
      }
    }()}
  </div>
);
1个回答

这是立即调用的函数表达式。

错误与您的代码？

您需要将函数包装在 () 中，检查：

{
   (() => {
      if (this.props.status === 'PENDING') {
         return (<div className="loading" />);
      }
   })()
}

在这种情况下，模式“{()=>{}()}”在做什么？

我们不能直接将 if/else 语句或任何其他语句放入 JSX 中，因此我们需要创建一个函数并将所有逻辑放入其中。

根据DOC：

if-else 语句在 JSX 中不起作用。这是因为 JSX 只是函数调用和对象构造的语法糖。如果三元表达式不够健壮，您可以在 JSX 之外使用 if 语句来确定应该使用哪些组件。或者，如果您更喜欢“内联”美学，请在 JSX 中定义立即调用的函数表达式。

编写相同代码的另一种方式：

render(){
    return(
        <div>
            <div className="form-group">
                ....   
            </div>
            {this._callFun()}    
        </div>
    )
}

_callFun(){
    if (this.props.status === 'PENDING') {
        return (<div className="loading" />);
    }
}
其它你可能感兴趣的问题
上一篇当我使用直径为 0.4 毫米的喷嘴打印 0.6 毫米厚的壁时会发生什么？ 下一篇多部分打印对象