Я хотел бы создать компонент Dropdown.Как разделяемое состояние между отдельным компонентом в React JS?
Когда я нажимаю на DropdownHandler
компонента, я хотел бы сохранить состояние isOpen
которое может быть true
или false
. Если true
, то этот state
используется <DropdownContent/>
, чтобы отобразить содержание. И по умолчанию state
isOpen
является false
в <Dropdown />
Компонент
Как я могу это сделать?
App.jsx
import React from 'react';
import {Dropdown, DropdownHandler, DropdownContent} from '../../components/Dropdown/Dropdown.jsx';
class HeaderConnected extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<Dropdown>
<DropdownHandler>
<Avatar title="Roberto"></Avatar>
</DropdownHandler>
<DropdownContent>
<li>Menu</li>
<li>Settings</li>
</DropdownContent>
</Dropdown>
</div>
);
}
}
export default HeaderConnected;
Dropdown.jsx
export class Dropdown extends React.Component {
constructor(props) {
super(props);
this.state = {
opened: false
}
}
render() {
return (
<div className="DROPDOWN">
{this.props.children}
</div>
);
}
}
export class DropdownHandler extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="DROPDOWN__HANDLER">
{this.props.children}
</div>
);
}
}
export class DropdownContent extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="DROPDOWN__CONTENT">
{this.props.children}
</div>
);
}
}
Вы можете использовать [Redux] (https://github.com/reactjs/react-redux) для этого. – Andrew
Прочитайте [Подъемное состояние вверх] (https://facebook.github.io/react/docs/lifting-state-up.html) и [Мышление в реале] (https://facebook.github.io/react/docs /thinking-in-react.html) - они объясняют идиоматический способ разделения государства. –