Первая компонента (нужен результат clicked
):
import React from 'react';
import './header.less';
class Header extends React.Component {
constructor(props) {
super(props);
this.clicked = this.clicked.bind(this);
}
state = {
flag: false
}
clicked() {
const f = this.state.flag;
if (f) {
this.setState({ flag: false });
console.log('false');
} else {
this.setState({ flag: true });
console.log(true);
}
}
render() {
return (
<div id='header'>
<div className='container'>
<div className='header'>
<div className='logo col-md-2 col-4'><h1>Sizov</h1></div>
<div className='authorization col-md-10 col-8'>
<i className='menu_icon' onClick={this.clicked}><img src='../../assets/header/menu.png' /></i>
<a>Sing in</a>
<a>Sing up</a>
<div className='input_search'>
<input placeholder='Search' type='text'/>
<i></i>
</div>
<a><img href='#' src='./../../assets/header/shopping-purse-icon.png'/><div className='red_dot'><span>0</span></div></a>
</div>
</div>
</div>
</div>
);
}
}
export default Header;
Вторая компонента (нужно поместить в show
результат выполнения clicked
):
import React from 'react';
import './menu.less';
class Menu extends React.Component {
show() {
if (this.clicked) {
return true;
} return false;
}
render() {
return (
<div id='menu'>
<div className='container'>
<div className='menu'>
<ul className={`${this.show ? 'red' : 'green'}`}>
<a href='#'><li>Detective</li></a>
<a href='#'><li>Humor</li></a>
<a href='#'><li>Fantasy</li></a>
<a href='#'><li>Poetry</li></a>
<a href='#'><li>Love story</li></a>
<a href='#'><li>Childrens literature</li></a>
<a href='#'><li>Business</li></a>
<a href='#'><li>Adventure</li></a>
</ul>
</div>
</div>
</div>
);
}
}
export default Menu;
Header
не связан с компонентомMenu
, то стандартными средствами типаprops
не решить вопрос. Однако, при наличии общего родителя можно хранить этот флаг в родителе и черезprops
передавать колбэки на изменение стейта родителя. – Denis Bubnov 2 апр '19 в 14:02