最小化代码，因为我使用相同的代码，只有 p 标签中的内容发生变化，组件 AccordionHeader 标题发生变化 [英] minimise the code since I am using the same code only the content in p tags changes and component AccordionHeader header changes

查看：17
本文介绍了最小化代码，因为我使用相同的代码，只有 p 标签中的内容发生变化，组件 AccordionHeader 标题发生变化的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

  • 我是 js 新手.
  • 我需要显示 6 个滑块.当我点击每个 div 时应该打开其对应的内容.
  • 当我再次单击 div 时，内容应该关闭.
  • 就像手风琴一样.
  • 知道它有效，但如何最小化代码，因为我使用相同的代码，只有 p 标签中的内容发生变化，组件 AccordionHeader 标题发生变化.

相关代码

测试一

<AccordionHeader className="jump-player-question-title jump-submenu-dropmenuHeader"头=球球球球sjsdsdkjjksddjks?"内容={PLAYER.accordionFourth(ballInfo)}

/>

  • 在下面提供我的代码

import React, {PropTypes, Component} from 'react';从'react-redux'导入{connect}；从踢模态"导入 {provideModalFunctions}；从'./player-expandable-contextual-item'导入AccordionHeader；出口类播放器扩展组件{静态手风琴(ballInfo){如果(ballInfo.isRetrieving){返回 (<LoadingIndicator key="foulLoading"/>);} else if (ballInfo.error) {返回 (<span className="右对齐否定">不可用</span>);} 别的 {返回 (<div className="jump-player-question-answer jump-submenu-dropmenuContents"><p>测试一</p>

);}}静态手风琴秒(球信息){如果(ballInfo.isRetrieving){返回 (<LoadingIndicator key="foulLoading"/>);} else if (ballInfo.error) {返回 (<span className="右对齐否定">不可用</span>);} 别的 {返回 (<div className="jump-player-question-answer jump-submenu-dropmenuContents"><p>测试二</p>

);}}静态手风琴第三(球信息){如果(ballInfo.isRetrieving){返回 (<LoadingIndicator key="foulLoading"/>);} else if (ballInfo.error) {返回 (<span className="右对齐否定">不可用</span>);} 别的 {返回 (<div className="jump-player-question-answer jump-submenu-dropmenuContents"><p>测试三</p>

);}}静态手风琴第四(球信息){如果(ballInfo.isRetrieving){返回 (<LoadingIndicator key="foulLoading"/>);} else if (ballInfo.error) {返回 (<span className="右对齐否定">不可用</span>);} 别的 {返回 (<div className="jump-player-question-answer jump-submenu-dropmenuContents"><p>测试四</p>

);}}静态手风琴第五(球信息){如果(ballInfo.isRetrieving){返回 (<LoadingIndicator key="foulLoading"/>);} else if (ballInfo.error) {返回 (<span className="右对齐否定">不可用</span>);} 别的 {返回 (<div className="jump-player-question-answer jump-submenu-dropmenuContents"><p>测试五</p>

);}}静态手风琴第六(球信息){如果(ballInfo.isRetrieving){返回 (<LoadingIndicator key="foulLoading"/>);} else if (ballInfo.error) {返回 (<span className="右对齐否定">不可用</span>);} 别的 {返回 (<div className="jump-player-question-answer jump-submenu-dropmenuContents"><p>测试六</p>

);}}使成为() {const {ballInfo} = this.props;返回 (<div className ="测试"><h2 className="jump-h2 jump-playerTitle">费用&amp;余额 <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)}/>

<h2 className="jump-h2 jump-playerTitle">账户操作</h2><div className="jump-playerContainer"><AccordionHeader className="jump-player-question-title jump-submenu-dropmenuHeader"头=球球球球sjsdsdkjjksddjks?"内容={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)}/>

);}}PLAYER.propTypes = {ballInfo: PropTypes.shape({foulLine1:PropTypes.string，foulLine2:PropTypes.string，foulLine3:PropTypes.string，isRetrieving: PropTypes.bool,错误:PropTypes.object}).是必须的，关闭:PropTypes.func，目标详细信息:PropTypes.object.isRequired};const select = (state) =>{返回 {ballInfo: state.ball,目标详细信息:state.goalDetails};};导出默认 provideModalFunctions(connect(select)(PLAYER));

解决方案

尝试只使用一个 static 并将 p 标签上的文本作为参数传递，这样你就不会在那里有很多功能

 静态手风琴(ballInfo, content) {如果(ballInfo.isRetrieving){返回 (<LoadingIndicator key="foulLoading"/>);} else if (ballInfo.error) {返回 (<span className="右对齐否定">不可用</span>);} 别的 {返回 (<div className="jump-player-question-answer jump-submenu-dropmenuContents"><p>{{内容}}</p>
);}}

所以在你调用手风琴时，你只需添加另一个参数

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

Relevant code

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

解决方案

try to use just one static and pass the text that will be on the p tag as a parameter, so you don't have a lot of functions there

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

so on your call to the accordion, you just add the other parameter

 <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 标题发生变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆