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

/＆GT;

在下面提供我的代码

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

最小化代码，因为我使用相同的代码只有p标签中的内容更改和组件AccordionHeader标头更改

1 个答案: