html - Bootstrap类不在React组件中

使用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);

最佳答案

React使用className（驼峰大小写）而不是class来匹配相同名称的Element.className DOM API。尝试用className替换所有用途。

关于html - Bootstrap类不在React组件中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32835432/