2017-02-12 90 views
1

在Jsfiddle中的示例React應用程序中,Bootstrap表顯示不正確。是的,我在JSX中使用了className而不是class。請在代碼中提出最新的錯誤。在Jsfiddle中無法正確顯示引導程序表反應代碼

鏈接代碼:https://jsfiddle.net/hgondela/teag0sqf/5/

var HelloTable = React.createClass({ 
    render: function() { 
    return ( 
     <div> 
      <div className='jumbotron text-center'>Bootstrap table in React JSX </div> 
      <table className="table table-striped table-bordered"> 
       <tr> 
       <th>Firstname</th> 
       <th>Lastname</th> 
       <th>Age</th> 
       </tr> 
       <tr> 
       <td>Jill</td> 
       <td>Smith</td> 
       <td>50</td> 
       </tr> 
       <tr> 
       <td>Eve</td> 
       <td>Jackson</td> 
       <td>94</td> 
       </tr> 
      </table>  
     </div> 
    ) 
    }  
}) 

ReactDOM.render(<HelloTable name="World" />, document.getElementById('container')); 

回答

1

我考察中的jsfiddle元素與我的瀏覽器,發現瀏覽器會自動將表包裝它是引導使用的樣式裏面<tbody>元素。所以我加了<tbody>

<table> 
    <tbody> 
    // table stuff 
    </tbody> 
</table> 

現在的表看起來不錯:https://jsfiddle.net/teag0sqf/6/

+0

它的工作。謝謝。 但是你知道爲什麼瀏覽器沒有在JSX代碼中自動添加嗎? –