如何在Reactjs中嵌套组件中的类切换
-
21-12-2019 - |
题
我在我的根组件中有这样的render()方法:
render: function() {
return (
<div className="question">
<QuestionA question={this.props.question} author={this.props.author}/>
<QuestionB yes={this.state.yes} no={this.state.no} />
<div className="question-side-switcher" onClick={this.handleSideChanging}></div>
</div>
);
}
.
在用户点击按钮时,我要在Questa和Consipd组件之间切换“活动”类。我怎样才能做到这一点?请记住,该询问和问题在其渲染()方法中设置了自己的ClassNames。例如,ChinkyB的render():
render: function() {
return (
<section className="question-b-container">
...
</section>
);
}
. 解决方案
您可以处理这件事。
如果希望父级控制其他类,则可以简单地将其传递给子组件,并将其添加到其现有类名( JSFIDDLE演示):
var QuestionA = React.createClass({
render: function() {
return <section className={this.props.className + " question-a-container"}>Section A</section>;
}
});
var QuestionB = React.createClass({
render: function() {
return <section className={this.props.className + " question-b-container"}>Section B</section>;
}
});
var Root = React.createClass({
getInitialState: function() {
return { question: 'a' };
},
render: function() {
var qAclassName = this.state.question === 'a' ? 'active' : '';
var qBclassName = this.state.question === 'b' ? 'active' : '';
return (
<div className="question">
<QuestionA className={qAclassName} />
<QuestionB className={qBclassName} />
<div className="question-side-switcher" onClick={this.handleSideChanging}>Change</div>
</div>
);
},
handleSideChanging: function() {
this.setState({question: this.state.question === 'a' ? 'b' : 'a' });
}
});
.
但是,让孩子管理类名可能会更有意义,并只需发送一些数据即可指示它应该设置其活动类( jsfiddle demo ):
// Using classSet to more easily create conditional class names;
// see http://facebook.github.io/react/docs/class-name-manipulation.html
var cx = React.addons.classSet;
var QuestionA = React.createClass({
render: function() {
// always set "question-a-container";
// set "active" if we got a truthy prop named `active`
var className = cx({
"question-a-container": true,
"active": this.props.active
});
return <section className={className}>Section A</section>;
}
});
var QuestionB = React.createClass({
render: function() {
// always set "question-b-container";
// set "active" if we got a truthy prop named `active`
var className = cx({
"question-b-container": true,
"active": this.props.active
});
return <section className={className}>Section B</section>;
}
});
var Root = React.createClass({
getInitialState: function() {
return { question: 'a' };
},
render: function() {
return (
<div className="question">
{/* For each question, compare to state to see if it's active. */}
<QuestionA active={this.state.question === 'a'} />
<QuestionB active={this.state.question === 'b'} />
<div className="question-side-switcher" onClick={this.handleSideChanging}>Change</div>
</div>
);
},
handleSideChanging: function() {
this.setState({question: this.state.question === 'a' ? 'b' : 'a' });
}
});
. 其他提示
作为 brian voelker ,现在操作课程的现在官方方法是使用 classnames 实用程序。
您可以定义两个组件,如:
import React, { Component } from 'react'
import classNames from 'classnames'
class QuestionA extends Component {
render () {
const { active } = this.props
const cx = classNames('question-a-container', { active })
return (
<section className={cx}></section>
)
}
}
.
并简单地传递了一个active
prop来切换名称adude类。
我有一个类似于此问题的问题,我创建了一个选项卡波抽屉,我只渲染了塔伯格所请求的组件,而且此类解决方案并不理想,因为我每次丢失儿童组件时都会转换为另一个塔博尔。
为了避免渲染我调用一个函数来呈现我的所有孩子,在这个函数中,我将每个孩子包裹在div中,我将所需的classname分配给div,在我需要显示单个组件的情况下时间所以我使用显示:块或无,具体取决于单击按钮。renderMyChilds() {
var renderedComponents = this.props.children.map(function(child, _key) {
if(this.state.drawerOpened == true) {
var ElementToRender = child;
var MyElement = (this.state.buttonSelected != _key) ? <div className="hiddenComponent"><ElementToRender /></div> : <div><ElementToRender /></div>;
} else {
var ElementToRender = child;
var MyElement = <div><ElementToRender className="hiddenComponent" /></div>;
}
return (MyElement);
}, this);
return renderedComponents;
}
.
.hiddencomponent { 显示:无; }
.visiblecomponent { 显示:块; }
不隶属于 StackOverflow