Javascript ReactJS调用if-else条件语句中的其他组件

我是ReactJS新手，我正在尝试构建一个简单的web应用程序。我创建了两个组件：1.Menu.jsx 2.ImgUrl.jsx。我希望用户单击菜单组件中的菜单按钮，然后触发ImgUrl组件。然而，当我进行测试时，ImgUrl组件将立即出现并消失。谁能给我一些建议什么是最佳实践？非常感谢你。代码如下：

import React from 'react';
import ImgUrl from './ImgUrl';
import { Button, Grid, Row, Col } from "react-bootstrap";

var $=require('jquery');

export default class Menu extends React.Component {
    constructor(props) {
        super(props);
        this.state = {value: ' '};

        this.handleChange = this.handleChange.bind(this);
        this.handleOption = this.handleOption.bind(this);
      }

      handleChange(val) {
        this.setState({value: val});
        //console.log(val);
        this.handleOption(val);
      }

      handleOption(val){
        if(val=='ads'){
          //console.log(val);
          $.get(window.location.href + 'Xxx', (data) => {  
            //console.log(data);     
            this.setState({value: data}); 
          });

        }

      }

      render() {
        const token = this.state.value;
        console.log(token);
        let test;
        if (token == 'ads'){
          test = <ImgUrl/>;
        }
        return (
            <Col>
              <ul>
                <li onClick={this.handleChange.bind(this,"ads")} >Import Ads Weekly Report</li>
                <li onClick={this.handleChange.bind(this,"bs")} >Import BS Weekly Report</li>
                <li onClick={this.handleChange.bind(this,'adskpi')}>Import Ads KPI Report</li>
                <li onClick={this.handleChange.bind(this,'importkpi')}>Build Ads Market Report</li>
                <li onClick={this.handleChange.bind(this,'adsMarket')}>Build Non Ads KPI Report</li>
                <li onClick={this.handleChange.bind(this,'nonAdsMarket')}>Build Non Ads Market Report</li>
              </ul>
              <h2 class="selectOption">You just select: {this.state.value}</h2>
              <div class="select-folder"> 

                    {test}
              </div>
            </Col>
        );
      }
}

从“React”导入React；
从“/ImgUrl”导入ImgUrl；
从“react bootstrap”导入{按钮、网格、行、列}；
var$=require（'jquery'）；
导出默认类菜单扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={value:''}；
this.handleChange=this.handleChange.bind（this）；
this.handleOption=this.handleOption.bind（this）；
}
手柄更换（val）{
this.setState（{value:val}）；
//控制台日志（val）；
这是一种新的方法；
}
手动操作（val）{
如果（val=='ads'）{
//控制台日志（val）；
$.get（window.location.href+'Xxx'，（数据）=>{
//控制台日志（数据）；
this.setState（{value:data}）；
});
}
}
render（）{
const token=this.state.value；
console.log（令牌）；
让我们测试一下；
如果（令牌==“ads”）{
测试=；
}
返回(

导入ads周报
导入bs周报
导入Ads KPI报告
生成广告市场报告
生成非Ads KPI报告
生成非Ads市场报告

您只需选择：{this.state.value}
{test}
);
}
}

您的HandleOptions中console.log（数据）的输出是什么

---

可能是您的HandleOptions将您所在州的值设置为与“ads”不同的值。它将导致重新呈现，如果值=='ads'，则只显示，因此它将消失。

您在控制台中没有收到任何错误吗？我没有看到任何错误：（console.log（'val'）返回“ads”console.log（“数据”）将从我的后端返回测试消息。我也在考虑菜单将重新呈现，但我不知道如何解决它。这就是问题所在。在HandleOptions this.setState（{value:data}）中；用来自后端的消息覆盖以前写入handleChange中的值的“ads”。也许您希望将消息保存在消息属性中，而不要覆盖值属性？很好！！！问题已解决。我忘记了将覆盖this.state.value。现在我设置了另一个状态来解决此问题。非常感谢！欢迎加入Stackoverflow中的参与者！