Правильно ли этот подход? Правильно ли это?
Нет. Не используйте jQuery для присоединения прослушивателей событий к элементам DOM, созданным и управляемым React. Используйте onClick'. I could not find# sidebarCollapse` в своем фрагменте. Это может выглядеть примерно так.
<button id="sidebarCollapse" onClick={state => this.setState({ collapsed: !state.collapsed })>Collapse</button
И класс для <nav id="sidebar">может зависеть от этого состояния
<nav id="sidebar" className={ this.state.collapsed ? "": "active" } >
Вы заметите, что вы выполняете текущие операции, такие как добавление удаления класса, атрибутов и других операций DOM в React, и просто объявляете, как вещи должны реагировать на изменения состояния. В этом случае, если вы попытаетесь запустить jQuery-операции, ваш пользовательский интерфейс, вероятно, может оказаться в несогласованном состоянии.
Миграция может быть выполнена следующим образом: замените части элементов интерфейса на React. Например, изначально вы могли бы сделать это,
<!-- rest of your existing jQuery based code -->
<header id="reactManagedNavbar">
<!-- Nothing here. React will take care of DOM Elements here -->
</header>
<!-- rest of your existing jQuery based code -->
И сторона Реакта может выглядеть так,
// main.js
ReactDOM.render(<MyNavBar />, document.getElementById('reactManagedNavBar'))
// MyNavBar.js could have the react components
Таким образом, вы можете постепенно перейти на React и по-прежнему иметь jQuery бок о бок. Просто не манипулируйте друг другу элементами DOM.
Иногда вам нужен плагин jQuery (анимации, графики визуализации и т. Д.) Внутри компонента React. Использовать refs!
class MyJQueryDependingComp extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
componentDidMount() {
// this.myRef.current is the dom element. Pass it to jQuery
}
render() {
return (
{/* rest of React elements */}
<div ref={this.myRef} />
{/* rest of React elements */}
);
}
}
Опять же, воздержитесь от прикосновения к DOM jQuery в React и наоборот.