初学react，这段return的函数代码怎么优化下，最好用es6和es7

Question

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

                <div
                    className={'basic_information_tag'}
                >
                    标签：
                </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>视频时长：</div>
                    <div>{_self.state.videoLength}</div>
                </div>

                <div className={'video_word_div'}>
                    <div>文件大小：</div>
                    <div>{_self.state.videoSize}</div>
                </div>

                {
                    _self.props.isAdmin === true ?
                        <div className={'video_word_div'}>
                            <div>距离创建时间：</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>
        )

Answer 1

这段代码复杂在元素层级太多，不在于语法用的不对。可以尝试着把一些元素拆出去做单独的组件，这样子看起来会比较清爽

Answer 2

可以把部分数据提取出来，放到对象列表中，然后使用 map 函数连接，而不用显示出所有类似的结构。

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