react 项目中，我想实现这种效果，点击任务一会弹出任务二、三、四

Question

react 项目中，我想实现这种效果，点击任务一会弹出任务二、三、四、五，然后任务一的内容变成点击的内容，后面的方框内容也会随着点击内容而变化

render() {
        var divStyle = {
            backgroundImage:`url(${Background})`
        }

        return (

            <div style={divStyle}
                 className='primaryStyle'>
                 
                 {/* 选择 锁定与未锁定 */}

                    <div className={'select_contain'}>
                        <div className={'select_item clearfix left'}>
                            <div className={'select_tit left'}></div>
                            <div className={'select_module_con left'}>
                                <div className={'select_result'}>
                                    <span>任务一：开启中</span>
                                    <div className={'triangle'}></div>
                                </div>
                                <ul>
                                    <li>节目1</li>
                                    <li>节目2</li>
                                    <li>节目3</li>
                                </ul>
                            </div>
                        </div>
                        <div className={'select_item clearfix left'}>
                            <div className={'select_tit left'}></div>
                            <div className={'select_module_con left'}>
                                <div className={'select_result'}>
                                    <span>未锁定</span>
                                    <div class={'triangle'}></div>
                                </div>
                                <ul>
                                    <li>嘉宾1</li>
                                    <li>嘉宾2</li>
                                    <li>嘉宾3</li>
                                </ul>
                            </div>
                        </div>
                    </div>
            </div>
        )
    }

样式

/* 锁定 */
ul,li{
    list-style: none
}
.left{
    float: left;
}
.right{
    float: right;
}

/* 总体 */
.select_contain{
    font-size: 14px;
    color: #519BB1;
    line-height: 38px;
    position: absolute;
    left: 1550px;
    top: 82px;
    width: 300px
    /* background-color: aqua; */
}

/* 每个部分 */
.select_item{
    margin-right: 5px;
    position: relative;
    /* background-color: greenyellow; */
}

/* 每个部分标题 */
.select_tit{
    margin-right: 0px;
}

.select_result{
    width: 200px;
    height: 30px;
    font-size: 13px;
    line-height: 30px;
    border:1px solid #ccc;
    text-align: center;
    /* 该属性允许您为元素添加圆角边框 */
    border-radius: 4px;
    /* text-indent 属性规定文本块中首行文本的缩进 */
    /* 允许使用负值。如果使用负值，那么首行会被缩进到左边。*/
    text-indent: -8px;
    cursor:pointer;
}
/* 第一个 */
.select_item:first-child .select_result{
    background-color: #519BB1;
    color:#FFFFFF;
}

/* 第两个 */

.select_item:nth-child(2) .select_result{
    background-color: #3565A8;
    color: #FFFFFF;
    width: 67px;
}

.select_item:nth-child(2) {
    margin-right: 0px;
}

.select_result .triangle{
    border:5px solid transparent; /* transparent 背景颜色透明 */
    border-top:5px solid #666;
    position: absolute;
    top: 15px;
    left:185px;
}

/*
    <div class='select_result'>
        <span>选择节目</span>
        <div class='triangle'></div>
    </div>
*/
.select_item:nth-child(2) .select_result .triangle{
    left:57px;
    display: none;
}

.select_item:nth-child(2) .select_result{
    text-indent: 0px;
}

/* 下拉部分 */
.select_item ul{
    display:none;
    position:absolute;
    top:100%;
    right:0;
    width:100px;
    background: #f3f3f3;
    border:1px solid #ccc;
    border-radius:0 0 4px 4px;
    border-top-color:#f3f3f3;
    margin-top:-4px;
}

.select_item ul li{
    text-align: center;
    cursor: pointer;
}
.select_item ul li:hover{
    background: #f4a100;
    color: #fff;
}

Answer 1

看了描述与问题，头大。没太明白。

提示一点：在react项目中，要想页面改变，先把数据变了。你的任务就完成了。