ReactJSのJSX構文

Question

私は以下のjsxコードを持っていますが、マッピング関数からいくつかのコードを取り出そうとしていますが、jsx構文でエラーが発生しました。

{this.props.someData ? 
    <div className="container"> 
    <h3>Heading</h3> 
    <div className="block1"> 
     <button>one</button> 
     <buttontwo</button> 
    </div> 
    this.props.someData.map((response, index) => { 
     return ( 
     <div className="Block2"> 
      <div key={index}> 
      <span>{response.number}</span> 
      </div> 
     </div> 
     </div> 
    ); 
}) : ''} 

Answer 1

このようにそれを書く：何をやっている

{this.props.someData ? 
    <div className="container"> 
      <h3>Heading</h3> 
      <div className="block1"> 
       <button>one</button> 
       <buttontwo</button> 
      </div> 
      {this.props.someData.map((response, index) => { 
       return ( 
       <div className="Block2"> 
        <div key={index}> 
        <span>{response.number}</span> 
        </div> 
       </div> 
      )}) 
      } 
    </div> 
: <div/>} 

間違い：条件が真である場合は、JSXをレンダリングしているので

をHTML要素、{}内部の任意のJSコードをレンダリングするには、必要とされますその中にmapを使用しているのでmapの機能を{}の中に入れても動作します。

Answer 2

あなたのマップをラップする子供を追加することができます。{他にもいくつかのエラーがあります。あまりにも早くあなたのタグと中括弧を書いていました。さらに、空のJSX要素は、空の文字列ではなくnullを返す必要があります。 <buttontwo</button>

構文の強調表示を提供し、一貫性のあるスペーシングを使用し、常にエラーをチェックするためにeslintを使用すると、StackOverflowに来る必要がなくなり、ブロッキングする必要がなくなります構文の質問に関するあなたのプログラミング。

{this.props.someData ? 
    <div className="container"> 
     <h3>Heading</h3> 
     <div className="block1"> 
      <button>one</button> 
      <button>two</button> 
     </div> 
     { this.props.someData.map((response, index) => { 
      return (
       <div className="Block2"> 
        <div key={index}> 
         <span>{response.number}</span> 
        </div> 
       </div> 
      ); 
     }) } 
    </div> : null} 

Answer 3

私が正しくあなたの意味を取得する場合、私はこれはと思う：

{this.props.someData && 
    (<div className="container"> 
    <h3>Heading</h3> 
    <div className="block1"> 
     <button>one</button> 
     <buttontwo</button> 
    </div> 
    {this.props.someData.map((response, index) => { 
     return ( 
     <div className="Block2"> 
      <div key={index}> 
      <span>{response.number}</span> 
      </div> 
     </div> 
    ); 
    })} 
    </div>) 
} 

私はdocumentationの条件付きレンダリング部を見てすることをお勧めいたします思います。