☰

解析エラー: 隣接する JSX 要素は囲みタグで囲む必要があります 質問する

tag-icon • tag-icon javascript reactjs render
解析エラー: 隣接する JSX 要素は囲みタグで囲む必要があります 質問する

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>
    )
  },

基本的に、ここで重要なのは の部分です( submitted 変数が に設定されている場合にif(this.state.submitted==false)これらの要素が表示されるようにしたいです)。divfalse

しかし、これを実行すると、質問にエラーが表示されます:

キャッチされないエラー: 解析エラー: 行 38: 隣接する JSX 要素は囲みタグで囲む必要があります

ここでの問題は何でしょうか? これを機能させるには何を使用すればよいでしょうか?

ベストアンサー1

コンポーネントを囲むタグの間に配置する必要があります。つまり、次のようになります。

// WRONG!

return (  
    <Comp1 />
    <Comp2 />
)

その代わり：

// Correct

return (
    <div>
       <Comp1 />
       <Comp2 />
    </div>
)

編集：ジョー・クレイのコメントによるとフラグメント API

// More Correct

return (
    <React.Fragment>
       <Comp1 />
       <Comp2 />
    </React.Fragment>
)

// Short syntax

return (
    <>
       <Comp1 />
       <Comp2 />
    </>
)

おすすめ記事