Я пытаюсь отобразить карусель бутстрапа через вызов ajax с помощью команды js. Ajax принимает данные json, состоящие из имени изображения, заголовка контента и некоторой метаинформации для каждого слайда, которую я хочу ввести в DOM. Итак, я использую функцию map
для создания всех слайдов. Моя проблема в том, что для первого слайда я хочу добавить класс active
. Но я не знаю, как использовать условие в map()
.Как использовать функцию отображения состояния в ReactJS?
В Реагировать, я написал: (в SliderWidget
классе, я написал комментарий на самом деле, где я должен использовать active
класс условно)
var HomeCarousel = React.createClass({
getInitialState: function() {
return {
data: []
}
},
componentDidMount: function() {
$.get("/api/slider", function(result) {
this.setState({
data: result
});
}.bind(this));
},
render: function() {
return (
<div id={"myCarousel"} className={"carousel slide"} data-ride="carousel">
{this.state.data.map((slider, i) => <SliderWidget key = {i} data = {slider} />)}
</div>
);
}
});
class SliderWidget extends React.Component {
render() {
return (
<div className={"item active"}> // here I want to use active class for the first slide
<img className={"first-slide"} src="images/pexels.jpeg" alt="First slide" />
<div className={"container"}>
<div className={"carousel-caption"}>
<h3>Research Indicates Breakfast is the Most Important Meal</h3>
<p><a className={"btn btn-primary"} href="#" role="button">Find Out More</a></p>
</div>
</div>
</div>
);
}
}
ReactDOM.render(
<HomeCarousel />, document.getElementById('react-home-carousel')
);
Не работает напрямую. Я внес некоторые изменения, но ваш ответ дал мне идею. – StreetCoder