初學(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ù)提取出來，放到對(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

編輯回答