Warum Daten nicht mit this.props in react js gerendert werden?

Question

Ich zerlege meinen Header in Komponenten. Bsp .: HaderTop, HeaderBottom. Des weiteren würde ich HeaderBottom in mehr Komponenten zerlegen. Eine der Komponenten von HeaderBottom ist "HeaderTab". Ich übergebe JSON OBJECT DATA über die "HeaderTab" -Komponente, die ich mit "this.props.data.map()" in der HeaderTab-Klasse loopen möchte. Ich bekomme keinen Fehler, aber ich bekomme auch nicht die Ansicht. Unten ist ein Stück Code. "Unten habe ich auch die Ansicht angehängt (Meine UI sollte so aussehen)."

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

Ich glaube, Sie brauchen ein Objekt in der Map-Funktion zurückzukehren:

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

Answer 2

Sie keinen Wert in der Karte Funktion zurück. Versuchen:

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

Ich sehe Sie es6 Klassen verwenden. Sie sollten auch versuchen https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions.