コンポーネントから配列を返すことができません

Question

私はいくつかのメニューでこのコンポーネントを持っています。ここでは、メニューアイテムの配列の繰り返しがあります。このコンポーネントを別のmainにインポートしたいのですが、このエラーが表示されます。A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.私はこの配列の繰り返しを削除して、単純なリンクを残すすべてがうまくいきます。なにが問題ですか？

成分：

const LandingMenu = (props) => { 
    return (
     props.data.map((element, _) => 
      <Link class="link" href={ element.target }>{ element.name }</Link> 
     ) 
    ) 
}; 

export default LandingMenu; 

インポート

<LandingMenu data={LANDING_CONTENT.menu} /> 

Answer 1

A成分は、それが単一の要素を返すために有するアレイ...を返すことはできません反応します。 DIVであなたの出力をラッピング

はおそらく正常に動作します：

const LandingMenu = (props) => { 
    return (
     <div> 
      {props.data.map((element, _) => 
       <Link class="link" href={ element.target }>{ element.name }</Link> 
      )} 
     </div> 
    ) 
}; 

export default LandingMenu; 

Answer 2

コンポーネントは、ルート要素でラップする必要があります。それが別のクラスのヘルパー関数であれば、あなたの表記はうまくいくでしょう。

だからあなたLandingMenuはこのように見ている必要があります

return (
    <div> 
     {props.data.map((element, _) => 
      <Link class="link" href={ element.target }>{ element.name }</Link>} 
    </div> 
    ) 
) 

代替ソリューションは、どのようなコンポーネント内でレンダリングするヘルパー関数を持っているだろう、現在「（参加 `にLandingMenu

//SomeComponent 
renderHelperFunction(data){ 
    return (
     {data.map((element, _) => 
      <Link class="link" href={ element.target }>{ element.name }</Link>} 
    ) 
) 

render(){ 
    return (... 

      {this.renderHelperFunction(this.props.data)} 

    ...) 
}