我正在尝试编译 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>
);
最佳答案
这是 Immediately-invoked function expression 。
您需要将函数包装在 () 中,检查以下内容:
{
(() => {
if (this.props.status === 'PENDING') {
return (<div className="loading" />);
}
})()
}
我们不能直接将 if/else 语句或任何其他语句放入 JSX 中,因此我们需要创建一个函数并将所有逻辑放入其中。
根据 DOC :
编写相同代码的另一种方式:
render(){
return(
<div>
<div className="form-group">
....
</div>
{this._callFun()}
</div>
)
}
_callFun(){
if (this.props.status === 'PENDING') {
return (<div className="loading" />);
}
}
关于javascript - JSX内部立即调用的函数表达式,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/45429836/