尽量减少代码，因为我使用的代码只有p标记中的内容更改和组件AccordionHeader头更改。

Question

• 我对js很陌生。
• 我需要显示6个滑块。当我点击每个div时，应该打开它相应的内容。
• 当我再次单击div时，应该关闭内容。
• 就像手风琴一样。
• 正确地知道它是有效的，但是如何将代码最小化，因为我使用的是相同的代码，只有p标记中的内容更改和组件AccordionHeader头更改。

相关代码

 Testing one 

<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 &amp; 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));

Answer 1

尝试只使用一个静态，并将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")} />