For beginners to learn how to optimize the return function code of react, it is best to use es6 and es7

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>
        )
Apr.26,2021

this code is too complex at the element level, not because the syntax is used incorrectly. You can try to separate some elements into separate components, which will look refreshing


you can extract some of the data, put it in the object list, and then use the map function to connect without showing all the similar structures.

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