Я знаю, что активным классом нужно управлять вручную в начальной загрузке. Я делал это несколько раз с jQuery.
Мой новейший проект работает с реакцией.
Я знаю, что я не должен устанавливать классы в доме с помощью jQuery при использовании реакции. Но как это сделать правильно?
Вам просто нужно указать active значение вкладок в вашей render функции. Чтобы узнать, должна ли вкладка иметь значение для свойства className, нужно где-то его хранить.
Как вы храните что-то в реагирующем компоненте? Вы используете state. Вы не показали никакого кода, но вы можете просто отслеживать, какая вкладка в данный момент активна в вашем состоянии.
Вы могли бы, например, это:
getInitialState: function() {
return { activeTabClassName: "tab1" };
}
render: function() {
return (
<ul>
<li className={(this.state.activeTabClassName === "tab1") ? "active" : ""}></li>
<li className={(this.state.activeTabClassName === "tab2") ? "active" : ""}></li>className </ul>
);
}
Внимание! Этот блок кода является лишь одним примером и не тестировался. (Есть несколько способов сделать это).
Вы также можете проверить это: Переключение класса на вкладках с помощью React.js
Вы можете использовать react-router для автоматического или ручного управления активным состоянием в навигационной панели начальной загрузки.
