Реагировать ребенок компонент визуализации ошибки

Question

Вот код:

import React from 'react'; 
import Tabs from './TabParent.jsx'; 

var Topbar = React.createClass ({ 
    propTypes : { 
     tbOptionsMenu : React.PropTypes.bool.isRequired, 
     lftSideEle : React.PropTypes.bool.isRequired, 
     typeOfTransaction : React.PropTypes.number, 
     tabAttr : React.PropTypes.array.isRequired 
    }, 

    getDefaultProps : function() { 
     return ({ 
      tabAttr : [ 
       { 
        tabClassName : 'tabPreview tab', 
        tabName : 'Preview' 
       }, 
       { 
        tabClassName : 'tabBody tab', 
        tabName : 'Body' 
       }, 
       { 
        tabClassName : 'tabSleeve tab', 
        tabName : 'Sleeve' 
       } 
      ] 
     }); 
    }, 

    render : function() { 
     var tbOptionsMenu = (
      <div id="tbOptionsMenu" className="tbIcon" data-action="menuItem-main" data-tooltip="MENU : Why not take a peek, for you may find what you seek...">i</div> 
     ); 

     var lftSideEle = (
      <div className="tbDetails tbBrandParent"> 
       <div className="mainHeading tbBrandName" data-tooltip="Your Brand Name" data-action="labelmenu-open">Brand Name</div> 
       <div className="mainHeading tbDesignName" data-tooltip="Your Design Name">a new design</div> 
      </div> 
     ); 

     return (
      <div className='topBar'> 
       {this.props.tbOptionsMenu && tbOptionsMenu} 
       {this.props.lftSideEle && lftSideEle} 
       <Tabs {this.props.tabAttr}> </Tabs> 
      </div> 
     ); 
    } 
}); 

export default Topbar; 

Webpack сообщает об ошибке на визуализацию компоненты «Tabs'.Error является бесполезным:» Модуль сборка не удалась: SyntaxError: .... неожиданным токен на линии ... '

Опуская линию, остальная часть кода работает нормально.

Answer 1

Попробуйте

<Tabs tabAttr={this.props.tabAttr} /> 

вместо от

<Tabs {this.props.tabAttr}> </Tabs> 

Вы можете прочитать об этом здесь https://facebook.github.io/react/docs/jsx-in-depth.html

Answer 2

Вы должны добавить имя атрибута

<Tabs tabAttr={this.props.tabAttr} /> 

или если вы хотите пройти все подпорки от родителя к ребенку вы можете использовать spread attributes как этот

<Tabs {...this.props} />