鍍金池/ 問(wèn)答/HTML/ 初學(xué)react,這段return的函數(shù)代碼怎么優(yōu)化下,最好用es6和es7

初學(xué)react,這段return的函數(shù)代碼怎么優(yōu)化下,最好用es6和es7

return (
            <div className={'basic_information_div'}>
                <div
                    className={'basic_information_title'}
                >基本信息</div>

                <div
                    className={'basic_information_tag'}
                >
                    標(biāo)簽:
                </div>

                <div className={'different_tags_div'}>
                    <div className={'one_tag_div'}>
                        <div
                            style={vulgarTagStyle}
                            className={'one_tag_left'}
                        >

                        </div>
                        <div className={'one_tag_right'}>{tagsName[0]}</div>
                    </div>
                    <div className={'one_tag_div'}>
                        <div
                            className={'one_tag_left'}
                            style={bloodyTagStyle}
                        >

                        </div>
                        <div
                            className={'one_tag_right'}
                        >{tagsName[1]}</div>
                    </div>
                    <div className={'one_tag_div'}>
                        <div
                            className={'one_tag_left'}
                            style={sexTagStyle}
                        >

                        </div>
                        <div
                            className={'one_tag_right'}
                        >{tagsName[2]}</div>
                    </div>
                    <div className={'one_tag_div'}>
                        <div
                            className={'one_tag_left'}
                            style={illegalTagStyle}>

                        </div>
                        <div
                            className={'one_tag_right'}
                        >{tagsName[3]}</div>
                    </div>
                    <div className={'one_tag_div'}>
                        <div
                            className={'one_tag_left'}
                            style={politicsTagStyle}
                        >

                        </div>
                        <div
                            className={'one_tag_right'}
                        >{tagsName[4]}</div>
                    </div>
                </div>

                <div className={'video_word_div'}>
                    <div>視頻時(shí)長(zhǎng):</div>
                    <div>{_self.state.videoLength}</div>
                </div>

                <div className={'video_word_div'}>
                    <div>文件大?。?lt;/div>
                    <div>{_self.state.videoSize}</div>
                </div>

                {
                    _self.props.isAdmin === true ?
                        <div className={'video_word_div'}>
                            <div>距離創(chuàng)建時(shí)間:</div>
                            <div>{_self.state.distanceCreationTime}</div>
                        </div> : ''
                }
                {
                    _self.props.isAdmin === true ?
                        <div

                            className={'submit_button_div'}

                        >
                            <div
                                type={'button'}
                                className={'submit_button'}
                                onClick={()=>this.props.submitTaskId('id')}
                            >提交</div>
                        </div> : ''
                }
            </div>
        )
回答
編輯回答
風(fēng)清揚(yáng)

可以把部分?jǐn)?shù)據(jù)提取出來(lái),放到對(duì)象列表中,然后使用 map 函數(shù)連接,而不用顯示出所有類似的結(jié)構(gòu)。

<div className={'one_tag_div'}>
    <div
        style={vulgarTagStyle}
        className={'one_tag_left'}
    >

    </div>
    <div className={'one_tag_right'}>{tagsName[0]}</div>
</div>
<div className={'one_tag_div'}>
    <div
        className={'one_tag_left'}
        style={bloodyTagStyle}
    >

    </div>
    <div
        className={'one_tag_right'}
    >{tagsName[1]}</div>
</div>
<div className={'one_tag_div'}>
    <div
        className={'one_tag_left'}
        style={sexTagStyle}
    >

    </div>
    <div
        className={'one_tag_right'}
    >{tagsName[2]}</div>
</div>
<div className={'one_tag_div'}>
    <div
        className={'one_tag_left'}
        style={illegalTagStyle}>

    </div>
    <div
        className={'one_tag_right'}
    >{tagsName[3]}</div>
</div>
<div className={'one_tag_div'}>
    <div
        className={'one_tag_left'}
        style={politicsTagStyle}
    >

    </div>
    <div
        className={'one_tag_right'}
    >{tagsName[4]}</div>
</div>
</div>
2018年3月21日 07:47
編輯回答
旖襯

這段代碼復(fù)雜在元素層級(jí)太多,不在于語(yǔ)法用的不對(duì)??梢試L試著把一些元素拆出去做單獨(dú)的組件,這樣子看起來(lái)會(huì)比較清爽

2017年4月30日 09:38