我试图设置我的React.js应用程序,以便它只呈现如果我设置的变量为真。
我的渲染函数是这样设置的:
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时显示出来)。
但是当运行这个时,我在问题中得到了错误:
解析错误:第38行:相邻的JSX元素必须被封装在一个外围标记中
这里的问题是什么?我该怎么做呢?
React元素只能返回一个元素。您必须用另一个元素标记来包装两个标记。
我还可以看到你的渲染函数没有返回任何东西。这是你的组件应该看起来的样子:
var app = React.createClass({
render () {
/*React element can only return one element*/
return (
<div></div>
)
}
})
还要注意,你不能在返回的元素中使用if语句:
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)"} : {};
if(this.state.submitted==false) {
return <YourJSX />
} else {
return <YourOtherJSX />
}
},
React 16.0.0我们可以从渲染中返回多个组件作为数组。
return ([
<Comp1 />,
<Comp2 />
]);
React 16.2.0 >我们可以在一个Fragment标签中返回多个渲染组件。片段
return (
<React.Fragment>
<Comp1 />
<Comp2 />
</React.Fragment>);
React 16.2.0 >你可以使用这个简写语法。(一些旧的工具版本不支持它,所以你可能想要显式地写<Fragment>,直到工具赶上。)
return (
<>
<Comp1 />
<Comp2 />
</>)
React元素只能返回一个元素。您必须用另一个元素标记来包装两个标记。
我还可以看到你的渲染函数没有返回任何东西。这是你的组件应该看起来的样子:
var app = React.createClass({
render () {
/*React element can only return one element*/
return (
<div></div>
)
}
})
还要注意,你不能在返回的元素中使用if语句:
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)"} : {};
if(this.state.submitted==false) {
return <YourJSX />
} else {
return <YourOtherJSX />
}
},