阵营JS单向数据流混乱
问题描述:
这是我想要实现使用reactJS阵营JS单向数据流混乱
var offCanvass = function() {
$('body').on('click', '.js-fh5co-nav-toggle', function(event) {
var $this = $(this);
$('#fh5co-offcanvass').toggleClass('fh5co-awake');
$('#fh5co-page, #fh5co-menu').toggleClass('fh5co-sleep');
if ($('#fh5co-offcanvass').hasClass('fh5co-awake')) {
$this.addClass('active');
} else {
$this.removeClass('active');
}
event.preventDefault();
});
};
我所能够做的是jQuery的解决方案:通过使用状态和类名,我可以改变的CSS类该组件内的事件上的特定组件。
var classNames = require('classnames');
export default class App extends React.Component {
render() {
var navClass = classNames({
'js-fh5co-nav-toggle': true,
'fh5co-nav-toggle': true,
});
return (
<div>
<Offcanvas/>
<Menu navClass={navClass}/>
<Page/>
</div>
);
}
}
export default class Menu extends React.Component {
constructor(){
super();
this.state={
isPressed: false,
};
}
isPressed(){
if(!this.state.isPressed){
this.setState({isPressed: true});
}else{
this.setState({isPressed: false});
}
}
render() {
var navClass = classNames(this.props.navClass, {
active: this.state.isPressed
});
return (
<div id="fh5co-menu" class="navbar">
<div class="container">
<div class="row">
<div class="col-md-12">
<a class={navClass} data-toggle="collapse" onClick={this.isPressed.bind(this)} data-target="#fh5co-navbar" aria-expanded="false" aria-controls="navbar"><span></span> <i></i></a>
<a href="/index" class="navbar-brand"><span>dota groove<a class=""></a></span></a>
</div>
</div>
</div>
</div>
);
}
}
export default class Canvas extends React.Component {
render(){
return(
<div id="fh5co-offcanvass">
<ul>
<li class="active"><a href="" data-nav-section="home">Home</a></li>
<li><a href="" data-nav-section="login">Register</a></li>
<li><a href="" data-nav-section="clients">Login</a></li>
</ul>
</div>
);
}
}
我想要做的:从一个组件使用一个事件来触发另一个组件,它不是自上而下的层次结构的类名变化。这是我的组件结构。
-app
-canvas ->classname apends here
-menu ->if click event occurs here
-page
答
请问以下模式适合您吗?
子组件(menu
)通过点击事件更改其父级(app
)的状态。然后父母通过道具将更新后的状态发送给另一个孩子(canvas
)。
这里是一个短的codecademy练习,描述这种模式:https://www.codecademy.com/en/courses/react-102/lessons/child-updates-sibling/exercises/child-updates-sibling-intro
答
您的<App/>
需要处理事件。您可以将回调函数作为支持传递给<Menu />
,点击此函数在App
中调用。现在,该应用可以对点击做出反应并将其传递给<Canvas/>
。
class App extends Component {
constructor() {
super();
this.state = {clicked: false};
}
handleClick() {
this.setState({clicked: !this.state.clicked});
}
render() {
return (
<div>
<OffCanvas isClicked={this.state.clicked} />
<Menu onClick={() => this.handleClick()} />
</div>
);
}
}
这是一个很常见的反应模式。
关于您的jQuery示例的旁注:您在此处所做的所有操作都可以使用“vanilla”JS轻松完成,无需jquery。