- 我是js新手。
- 我需要显示 6 个滑块。我单击时的每个 div 都应打开其相应的内容。
- 当我再次单击 div 时,内容应该关闭。
- 就像手风琴一样。
- 正确知道它的工作原理,但如何最小化代码,因为我使用相同的代码,只有 p 标签中的内容发生变化,组件 Accordion Header 标头发生变化。
相关代码
测试一
<AccordionHeader className="jump-player-question-title jump-submenu-dropmenuHeader"
header="ball ball ball ball sjsdsdkjjksddjks?" content={PLAYER.accordionFourth(ballInfo)}
/>
import React, {PropTypes, Component} from 'react';
import {connect} from 'react-redux';
import {provideModalFunctions} from 'kick-modal';
import AccordionHeader from './player-expandable-contextual-item';
export class PLAYER extends Component {
static accordion(ballInfo) {
if (ballInfo.isRetrieving) {
return (
<LoadingIndicator key="foulLoading" />
);
} else if (ballInfo.error) {
return (
<span className="right-align negative">Unavailable</span>
);
} else {
return (
<div className="jump-player-question-answer jump-submenu-dropmenuContents">
<p>
Testing one
</p>
</div>
);
}
}
static accordionSecond(ballInfo) {
if (ballInfo.isRetrieving) {
return (
<LoadingIndicator key="foulLoading" />
);
} else if (ballInfo.error) {
return (
<span className="right-align negative">Unavailable</span>
);
} else {
return (
<div className="jump-player-question-answer jump-submenu-dropmenuContents">
<p>
Testing two
</p>
</div>
);
}
}
static accordionThird(ballInfo) {
if (ballInfo.isRetrieving) {
return (
<LoadingIndicator key="foulLoading" />
);
} else if (ballInfo.error) {
return (
<span className="right-align negative">Unavailable</span>
);
} else {
return (
<div className="jump-player-question-answer jump-submenu-dropmenuContents">
<p>
Testing Three
</p>
</div>
);
}
}
static accordionFourth(ballInfo) {
if (ballInfo.isRetrieving) {
return (
<LoadingIndicator key="foulLoading" />
);
} else if (ballInfo.error) {
return (
<span className="right-align negative">Unavailable</span>
);
} else {
return (
<div className="jump-player-question-answer jump-submenu-dropmenuContents">
<p>
Testing four
</p>
</div>
);
}
}
static accordionFifth(ballInfo) {
if (ballInfo.isRetrieving) {
return (
<LoadingIndicator key="foulLoading" />
);
} else if (ballInfo.error) {
return (
<span className="right-align negative">Unavailable</span>
);
} else {
return (
<div className="jump-player-question-answer jump-submenu-dropmenuContents">
<p>
Testing five
</p>
</div>
);
}
}
static accordionSixth(ballInfo) {
if (ballInfo.isRetrieving) {
return (
<LoadingIndicator key="foulLoading" />
);
} else if (ballInfo.error) {
return (
<span className="right-align negative">Unavailable</span>
);
} else {
return (
<div className="jump-player-question-answer jump-submenu-dropmenuContents">
<p>
Testing Six
</p>
</div>
);
}
}
render() {
const {ballInfo} = this.props;
return (
<div className ="testing">
<h2 className="jump-h2 jump-playerTitle">Fees & Balances</h2>
<div className="jump-playerContainer">
<AccordionHeader className="jump-player-question-title jump-submenu-dropmenuHeader"
header="ball" content={PLAYER.accordion(ballInfo)}
/>
<AccordionHeader className="jump-player-question-title jump-submenu-dropmenuHeader"
header="Iball ball" content={PLAYER.accordionSecond(ballInfo)}
/>
<AccordionHeader className="jump-player-question-title jump-submenu-dropmenuHeader"
header="ball ball ball 3" content={PLAYER.accordionThird(ballInfo)}
/>
</div>
<h2 className="jump-h2 jump-playerTitle">Account Actions</h2>
<div className="jump-playerContainer">
<AccordionHeader className="jump-player-question-title jump-submenu-dropmenuHeader"
header="ball ball ball ball sjsdsdkjjksddjks?" content={PLAYER.accordionFourth(ballInfo)}
/>
<AccordionHeader className="jump-player-question-title jump-submenu-dropmenuHeader"
header="dsknjdsncjdnsjkcsdnjcsdncjkdsn" content={PLAYER.accordionFifth(ballInfo)}
/>
<AccordionHeader className="jump-player-question-title jump-submenu-dropmenuHeader"
header="heuwsdjclkdsjclksjcdjeljlj" content={PLAYER.accordionSixth(ballInfo)}
/>
</div>
</div>
);
}
}
PLAYER.propTypes = {
ballInfo: PropTypes.shape({
foulLine1: PropTypes.string,
foulLine2: PropTypes.string,
foulLine3: PropTypes.string,
isRetrieving: PropTypes.bool,
error: PropTypes.object
}).isRequired,
close: PropTypes.func,
goalDetails: PropTypes.object.isRequired
};
const select = (state) => {
return {
ballInfo: state.ball,
goalDetails: state.goalDetails
};
};
export default provideModalFunctions(connect(select)(PLAYER));
尝试仅使用一个静态并将 p 标记上的文本作为参数传递,这样您就不会在那里有很多函数
static accordion(ballInfo, content) {
if (ballInfo.isRetrieving) {
return (
<LoadingIndicator key="foulLoading" />
);
} else if (ballInfo.error) {
return (
<span className="right-align negative">Unavailable</span>
);
} else {
return (
<div className="jump-player-question-answer jump-submenu-dropmenuContents">
<p>
{{content}}
</p>
</div>
);
}
}
所以在调用手风琴时,只需添加另一个参数
<AccordionHeader className="jump-player-question-title jump-submenu-dropmenuHeader" header="ball ball ball ball sjsdsdkjjksddjks?" content={PLAYER.accordion(ballInfo, "qwe")} />
<AccordionHeader className="jump-player-question-title jump-submenu-dropmenuHeader" header="dsknjdsncjdnsjkcsdnjcsdncjkdsn" content={PLAYER.accordion(ballInfo, "asd")} />
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)