为什么 React.js 中相邻的 JSX 元素需要包含标签？

相邻 JSX 元素需要封闭标签

创建 React.js 组件时，必须确保相邻 JSX 元素包装在封闭标签内

在提供的代码片段中，错误：

Uncaught Error: Parse Error: Line 38: Adjacent JSX elements must be wrapped in an enclosing tag

表示 if 语句的条件渲染导致 div 元素在没有封闭容器的情况下渲染。要解决此问题，需要将这些元素包装在合适的标签中，例如 div：

<code class="jsx">if (this.state.submitted === false) {
  return (
    <div>
      <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>
  );
}</code>

或者，您可以使用 Fragments API 创建封闭上下文，而无需向 DOM 添加不必要的元素:

<code class="jsx">if (this.state.submitted === false) {
  return (
    <React.Fragment>
      <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>
    </React.Fragment>
  );
}</code>

以上是为什么 React.js 中相邻的 JSX 元素需要包含标签？的详细内容。更多信息请关注PHP中文网其他相关文章！