なぜ反応するjsのthis.propsを使ってデータがレンダリングされないのですか？

Question

私はヘッダをコンポーネントに分解しています。例：HaderTop、HeaderBottom。さらに、HeaderBottomをより多くのコンポーネントに分割しました。 HeaderBottomのコンポーネントの1つが「HeaderTab」です。私はHeaderTabクラスの "this.props.data.map（）"を使ってループしたい "HeaderTab"コンポーネントを通してJSONオブジェクトデータを渡しています。私は何のエラーも得ていないが、私はまた、ビューを取得していない。以下はコードの一部です。 「以下はビューを添付しました（私のUIはこのように見えるはずです）。

import React from 'react'; 
    import { Link } from 'react-router'; 

    import HeaderBreadcrumb from './HeaderBreadcrumb'; 
    import HeaderTab from './HeaderTab'; 

    export default class HeaderBottom extends React.Component { 
     constructor(props) { 
      super(props); 

      this.state = { 
      tabs: 
      [ 
       {"id":1,"name":"Dental","path":"dentalplan"},     
       {"id":2,"name":"Views","path":"dentalplan"}, 
       {"id":3,"name":"Accident Companion","path":"dentalplan"}, 
       {"id":4,"name":"Critical Illness","path":"dentalplan"}, 
       {"id":5,"name":"Hospital Confinement","path":"dentalplan"} 
      ] 
      } 
     } 
     render() { 
      return (
        <div id="layout-navigation" className="layout-navigation"> 
         <div className="content-heading"> 
         <div className="container"> 

          <HeaderBreadcrumb /> 


          <div className="content-heading__title"> 
          <h1>Dental Plans</h1> 
          </div> 

          <HeaderTab data={this.state.tabs}/> 


         </div> 
         </div> 
        </div> 
      ); 
     } 

    } 

    import React from 'react'; 
    import { Link } from 'react-router'; 


    export default class HeaderTab extends React.Component { 

     render() { 
      return (

       <div className="content-heading__tabs" data={this.props.data}> 
        <ul className="tabs tabs--horizontal tabs--overlay"> 
           { 
           this.props.data.map(function(item, i) { 
            <li role="presentation" className="tab"> 
            <Link to={item.path}>{item.name}</Link> 
            </li> 
           }) 
           } 
        </ul> 
       </div>  

      ); 
     } 

    } 

Answer 1

私はあなたのマップ機能でオブジェクトを返す必要があると思う：

this.props.data.map(function(item, i) { 
    return (
     <li role="presentation" className="tab"> 
      <Link to={item.path}>{item.name}</Link> 
     </li> 
    ) 
}) 

Answer 2

あなたはmap関数に値を返すされていません。 試してみてください。

{ 
    this.props.data.map(function(item, i) { 
     return <li role="presentation" className="tab"> 
      <Link to={item.path}>{item.name}</Link> 
     </li>; 
    }) 
} 

私はあなたがES6クラスを使用している参照してください。また、https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functionsも試してください。