解析错误:相邻的 JSX 元素必须包裹在封闭标签中
问题:
尝试时根据变量有条件地渲染组件,会发生错误:“解析错误:相邻的 JSX 元素必须包含在封闭标记中。”
问题:
导致此错误的原因如何解决?
答案:
在 React 中,每个组件或组件组都必须包含在单个标签内。在提供的代码中,条件渲染导致相邻的 JSX 元素(在本例中为输入和 ReactCSSTransitionGroup 组件)在没有封闭标签的情况下出现。
解决方案:
解决错误,将这些元素包装在合适的封闭标签中,例如
示例:
<code class="jsx">render: function() { return ( <div> {this.state.submitted == false && ( <> <input type="email" onChange={this._updateInputValue} /> <ReactCSSTransitionGroup> <div> <a href="#" onClick={this.saveAndContinue}>Request Invite</a> </div> </ReactCSSTransitionGroup> </> )} </div> ); },</code>
使用
以上是为什么我在 React 中收到'解析错误:相邻的 JSX 元素必须包裹在封闭标签中”?的详细内容。更多信息请关注PHP中文网其他相关文章!