Ваш рекурсивный компонент Меню может быть уменьшен до одного простого компонента:
import React, { Component } from "react";
class Menu extends Component {
state = {
// initially no item is active
active: null
};
// when clicked store the item id as active
handleClick = id => this.setState({ active: id });
render() {
const { links } = this.props;
const { active } = this.state;
return (
<ul className="menu">
{links.map(({ id, name, children }) => (
<li key={id} onClick={() => this.handleClick(id)}>
{name}
{/* only render the children links when */}
{/* the item is the active one and the */}
{/* item actually has children */}
{id === active && children && (
<Menu links={children} />
)}
</li>
))}
</ul>
);
}
}
И использовать его следующим образом:
const LINKS = [
{id: 'one', name: 'One', children: [
{id: 'alpha', name: 'Alpha', children: [
{id: 'hello', name: 'Hello'},
{id: 'world', name: 'World'},
]},
{id: 'beta', name: 'Beta'},
]},
{id: 'two', name: 'Two'},
]
ReactDOM.render(<Menu links={LINKS} />, document.getElementById('root'));
Проверьте рабочийпример , чтобы увидеть его в действии:
Функциональность jQuery достигается за счет того, что каждый рекурсивный компонент меню сохраняет активную ссылку как состояние и толькоотобразить дочерние элементы этой ссылки для активного элемента.
Обратите внимание, что вам не нужно скрывать элементы с реагированием.Вы не отображаете их в первую очередь, если они не должны отображаться.В этом примере это проверяется путем сравнения активного идентификатора с идентификатором элемента, который должен быть визуализирован.Если это соответствует -> отображать подссылки.