我正在尝试设置我的 React.js
应用程序,以便它仅在我设置的变量为 true
时呈现。
我的渲染函数的设置方式如下:
render: function() {
var text = this.state.submitted ? 'Thank you! Expect a follow up at '+email+' soon!' : 'Enter your email to request early access:';
var style = this.state.submitted ? {"backgroundColor": "rgba(26, 188, 156, 0.4)"} : {};
return (
<div>
if(this.state.submitted==false)
{
<input type="email" className="input_field" onChange={this._updateInputValue} ref="email" value={this.state.email} />
<ReactCSSTransitionGroup transitionName="example" transitionAppear={true}>
<div className="button-row">
<a href="#" className="button" onClick={this.saveAndContinue}>Request Invite</a>
</div>
</ReactCSSTransitionGroup>
}
</div>
)
},
基本上,这里的重要部分是 if(this.state.submitted==false)
部分(我希望这些 div
元素在提交变量时显示设置为 false
)。
但是在运行这个时,我得到了问题中的错误:
Uncaught Error: Parse Error: Line 38: Adjacent JSX elements must be wrapped in an enclosing tag
这里有什么问题?我可以用什么来完成这项工作?
最佳答案
你应该把你的组件放在一个封闭的标签之间,这意味着:
// WRONG!
return (
<Comp1 />
<Comp2 />
)
改为:
// Correct
return (
<div>
<Comp1 />
<Comp2 />
</div>
)
编辑: 根据 Joe Clay 关于 Fragments API 的评论
// More Correct
return (
<React.Fragment>
<Comp1 />
<Comp2 />
</React.Fragment>
)
// Short syntax
return (
<>
<Comp1 />
<Comp2 />
</>
)
关于javascript - 解析错误 : Adjacent JSX elements must be wrapped in an enclosing tag,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31284169/