Question

在Jsfiddle的示例React应用程序中，Bootstrap表未正确显示。是的，我在JSX中使用了className而不是class。请在代码中说明错误。

链接到代码：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'));

Answer 1

我用浏览器检查了jsfiddle中的元素，发现浏览器会自动在表格中插入一个<tbody>元素，包含引导程序用于样式的内容。所以我添加了<tbody>：

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

现在表格看起来很棒：https://jsfiddle.net/teag0sqf/6/

引导表在Jsfiddle React代码中无法正确显示

1 个答案: