最小化代码，因为我使用的是相同的代码，只是p标记中的内容发生了变化，组件AccordionHeader标头发生了变化

Question

• 我是js新手。
• 我需要显示6个滑块。当我单击每个div时，应打开其相应的内容。
• 当我再次单击div时，内容应关闭。
• 就像手风琴一样。
• 正确地知道它可以工作，但是如何减少代码，因为我使用的是相同的代码，只是p标记中的内容发生了变化，组件AccordionHeader标头发生了变化。

相关代码

测试一个

    <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")} />