html - Bootstrap 类未在 React 组件中获取

Question

使用 React 时， Bootstrap 类不会被拾取。 我需要将行作为单独的组件，因为我将在不同的列表中重复使用。 这是我的代码。知道为什么没有选择 boostrap 类吗？ PS:我在我的 html 中添加了 Bootstrap 样式表。

var VehicleList = React.createClass({
getInitialState: function () {
    return {
        data: [
            {
                imageUrl: '',
                carName: 'Toyota Rav 4 2013 GXL 5D 4x2',
                carDescription: '4Cyl, 2.0L, Petrol, Front Wheel Drive, Black, 39,326 KM, 1EDW426',
                location: 'WA',
                price: '28,990',
                priceDescription: 'Ex Govt Charges'
            },
            {
                imageUrl: '',
                carName: 'Toyota Camry CV50 2014 Altise 4D Sedan',
                carDescription: '4Cyl, 2.5L, Petrol, Front Wheel Drive, Silver, 6,211 KM, 1EOZ902',
                location: 'WA',
                price: '21,990',
                priceDescription: 'Ex Govt Charges'
            },
            {
                imageUrl: '',
                carName: 'Toyota 86 ZN6 2013 GTS 2D Coupe',
                carDescription: '4Cyl, 2.0L, Petrol, Rear Wheel Drive, Orange, 19,973 KM, 1AD6VE',
                location: 'VIC',
                price: '33,998',
                priceDescription: 'Drive Away No More to Pay'
            },
            {
                imageUrl: '',
                carName: 'Toyota Camry CV50 2013 Atara SX 4D Sedan',
                carDescription: '4Cyl, 2.5L, Petrol, Front Wheel Drive, Graphite, 39,381 KM, 1EHO792',
                location: 'WA',
                price: '22,888',
                priceDescription: 'Ex Govt Charges'
            },
            {
                imageUrl: '',
                carName: 'Toyota Yaris 2014 YR 5D Hatch',
                carDescription: '4Cyl, 1.3L, Petrol, Front Wheel Drive, Red, 12,130 KM, 1EOF489',
                location: 'WA',
                carPrice: '14,500',
                priceDescription: 'Ex Govt Charges'
            }

        ]
    }
},
render: function () {
    var rows = this.state.data.map(function (vehicle, i) {
        return <VehicleRow data={vehicle} key={i}/>
    })
    return <div class="container listContent">{rows}</div>
}
});

var VehicleRow = React.createClass({
render: function () {
    return <div class='row'>
        <div class='col-md-3 imageContainer'></div>
        <div class='col-md-6 carInfoContainer'>
            <div class='carName'>{this.props.data.carName}</div>
            <div>{this.props.data.carDescription}</div>
            <div><span>Location:</span><span>{this.props.data.location}</span></div>
        </div>
        <div class='col-md-3 priceInfoContainer'>
            <div>{this.props.data.price}</div>
            <div>{this.props.data.priceDescription}</div>
        </div>
    </div>

}
});

React.render(<VehicleList />, document.body);

Answer 1

React 使用 className (驼峰式)而不是 class 来匹配 Element.className同名的 DOM API。尝试将所有用途替换为 className。